/* ============================================================================
   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 Django-Message-Regeln stehen seit T13 (ADR-0020) NICHT mehr hier,
   sondern in core/css/messages.css (eine Datei fuer base.html und die
   Startseite). Siehe die Notiz unten, wo sie standen.

   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). Die Body-Flaeche #f2f2f2 ist seit ADR-0021 --ds-bg-page
   (wert-exakt, frueher hier literal, weil es noch kein Token gab).
   ============================================================================ */

@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: var(--ds-bg-page);
   margin: 0;
   padding: 0;
}

/* Die Django-Message-Regeln (.messages-container/.message*) und ihre Animationen
   sind mit T13 (ADR-0020) nach core/css/messages.css umgezogen -- eine
   gemeinsame Datei fuer base.html UND die Startseite, geladen direkt nach
   dieser Datei (gleiche Kaskadenposition wie vorher).
   Mit umgezogen/aufgeloest:
   - @keyframes fadeIn: einziger verbleibender Konsument war locator.js
     (setzt animation per style-Zuweisung) -> Definition wert-identisch nach
     locator/static/locator/locator.css verschoben (dort ihr Owner).
   - @keyframes fadeOut + die generische .fade-out-Regel: ohne Konsument
     (archive_main.css und subtopics.css definieren beides selbst fuer ihre
     .tiles/.charts-table-container) -> entfallen. Die Messages nutzen jetzt
     .message.is-hiding aus messages.css. */

/* ============================================================================
   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: #78E3A6 (Feedback-Banner, Off-Brand), das Schluesselwort
   "white" (kein Hex-Literal, unangetastet) + rgba-Schatten.
   Seit ADR-0021 tokenisiert (wert-exakt): #e0e0e0 (Hover-Flaeche) ->
   --ds-border, #333 -> --ds-text.

   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: var(--ds-border);
  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: var(--ds-text);
}

/* ============================================================================
   SEKTION 3: Header auf schmalen Schirmen (Phase 4, T9 Scheibe 1)

   Ausgangslage, gemessen am 05.08.2026 bei 390 px (Kontext mit isMobile: true,
   also MIT dem viewport-Meta aus Scheibe 0):

     verfuegbar (.site-header-inner)  350 px
     benoetigt                        592 px
       .site-header-brand             314 = Logo 50 + margin-right 90 + Titel 174
       .site-header-nav               278 = 88 + 15 + 120 + 15 + 40

   Daraus folgt der Zuschnitt, nicht aus Geschmack: eine EINZEILIGE Loesung ist
   ohne Textkuerzung nicht erreichbar. Selbst mit margin-right: 0 am Logo
   blieben 502 px Bedarf bei 350 px Platz. Also bricht die Nav-Zeile um.

   Gegenprobe, die den Umfang begrenzt: ohne die beiden gruppenabhaengigen
   Knoepfe ("selber machen" = creator, "Databuddies" = buddies) betraegt der
   Bedarf 354 px und der Ueberlauf ist 0. Der Defekt trifft also nur Nutzer
   MIT diesen Gruppen -- was in der Redaktion der Normalfall ist.

   Warum das den Desktop nicht beruehren KANN: alle Regeln stehen in einer
   Media-Query, die oberhalb von 768 px nicht gilt. Der Beweis misst es
   trotzdem (12 Seiten bei 1440 px, Computed-Style- und Kastenmass-Hash) --
   eine Regel, die nicht greifen kann, und eine, die nicht greift, sind zwei
   verschiedene Behauptungen.

   768 px ist kein neuer Breakpoint: er ist bereits in subtopics.css,
   locator.css und chartmaker.css in Gebrauch (von insgesamt 10 verschiedenen
   im Bestand -- das Vereinheitlichen ist ein eigener, spaeterer Posten).
   ============================================================================ */

@media (max-width: 768px) {
  .site-header-inner {
    flex-wrap: wrap;
    row-gap: 12px;
  }

  /* 90 px sind auf einem Handy nicht Abstand, sondern ein Drittel der
     Bildschirmbreite. Auf dem Desktop bleibt der Wert unangetastet. */
  .site-header-logo {
    margin-right: 16px;
  }

  /* Volle Breite -> die Nav bildet die zweite Zeile, statt sich neben die
     Marke zu quetschen. */
  .site-header-nav {
    width: 100%;
    /* Defensiv fuer Geraete unter ~350 px nutzbarer Breite (iPhone SE u. ae.):
       dort passen die drei Knoepfe auch in einer eigenen Zeile nicht mehr
       nebeneinander. Bei 390 px aendert diese Zeile nichts -- 278 < 350. */
    flex-wrap: wrap;
  }
}