/* ==========================================================================
   1. GLOBAL VARIABLES & SETTINGS
   Zentrale Definition aller relevanten Farben, Maße, Schriftarten
   sowie Ausrichtungs- und Textausrichtungsoptionen.
   ========================================================================== */
:root {
  /* Farben */
  --color-header-bg: #3498db;              /* Hintergrundfarbe des Headers */
  --color-header-text: #ffffff;            /* Textfarbe im Header */
  --color-nav-bg: #2980b9;                 /* Hintergrundfarbe der Navigation */
  --color-nav-text-mobile: #ffffff;        /* Navigationstextfarbe (Mobile) */
  --color-nav-text-desktop: #000000;       /* Navigationstextfarbe (Desktop) */
  --color-body-text: #333333;              /* Standard-Textfarbe im Body */
  --color-section-border: #dddddd;         /* Rahmenfarbe der Sections */
  --color-section-alt-bg: #f4f4f4;          /* Alternative Hintergrundfarbe der Sections */
  --color-footer-bg: #333333;              /* Hintergrundfarbe des Footers */
  --color-footer-text: #ffffff;            /* Textfarbe im Footer */
  
  /* Maße & Abstände */
  --header-height: 80px;                   /* Feste Höhe des Headers */
  --header-padding: 10px 20px;             /* Innenabstand des Headers */
  /* Mobile Navigation; da die Höhe abhängig vom Inhalt ist, verwenden wir hier im Scroll-Margin einen festen Wert für den Offset */
  --nav-height-mobile-offset: 20px;  
  --nav-height-desktop: 60px;              /* Feste Höhe der Desktop-Navigation */
  --main-margin-top-mobile: calc(var(--header-height) + var(--nav-height-mobile-offset));
  --main-margin-top-desktop: calc(var(--header-height) + var(--nav-height-desktop));
  
  /* Navigation: Ausrichtung & Orientierung */
  /* Mögliche Werte für justify-content: flex-start (links), center, flex-end (rechts) */
  --nav-justify-content-mobile: center;   /* Ausrichtung der Nav-Items in Mobile */
  --nav-justify-content-desktop: center;  /* Ausrichtung der Nav-Items in Desktop */
  /* Orientierung: "column" (vertikal) in Mobile, "row" (horizontal) in Desktop */
  --nav-orientation-mobile: column;
  --nav-orientation-desktop: row;
  /* Textausrichtung in den Navigationseinträgen */
  --nav-text-align-mobile: center;
  --nav-text-align-desktop: center;
  
  /* Textausrichtungen für Inhalte */
  --body-text-align: left;
  --content-text-align: left;
  --section-text-align: left;
  --footer-text-align: center;
  
  /* Schriftarten */
  --font-primary: Arial, sans-serif;
  
  /* Sonstige Einstellungen */
  --menu-toggle-font-size: 2rem;           /* Schriftgröße des Toggle-Buttons */
  --nav-mobile-breakpoint: 768px;          /* Breakpoint für mobile/desktop Ansicht */
  --nav-item-padding-mobile: 10px 15px;      /* Innenabstand der Nav-Items (Mobile) */
  --nav-item-padding-desktop: 1rem;          /* Innenabstand der Nav-Items (Desktop) */
  --nav-item-margin-desktop: 15px;           /* Horizontaler Abstand zwischen Nav-Items (Desktop) */
}

/* ==========================================================================
   2. RESET & BASIS-STYLES
   Grundlegende Formatierungen und Reset.
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: var(--font-primary);
  line-height: 1.6;
  color: var(--color-body-text);
  text-align: var(--body-text-align);
}

/* ==========================================================================
   3. HEADER
   Fixierter Header, stets oben sichtbar.
   ========================================================================== */
header {
  background-color: var(--color-header-bg);
  color: var(--color-header-text);
  padding: var(--header-padding);
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 1000;
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  font-size: 1.5rem;
}

/* ==========================================================================
   4. MENU TOGGLE BUTTON (MOBILE)
   Dieser Button ist in der mobilen Ansicht sichtbar und dient zum Ein- 
   bzw. Ausblenden der Navigation.
   ========================================================================== */
.menu-toggle {
  background: none;
  border: none;
  color: var(--color-header-text);
  font-size: var(--menu-toggle-font-size);
  cursor: pointer;
  display: block; /* In mobile sichtbar */
}

/* ==========================================================================
   5. NAVIGATION (MOBILE)
   Fixiert unter dem Header; standardmäßig ausgeblendet und als vertikale
   Liste dargestellt. Außerdem sollen die Navigationselemente in der mobilen
   Ansicht die gesamte Breite ausfüllen.
   ========================================================================== */
.navigation {
  background: var(--color-nav-bg);
  position: fixed;
  top: var(--header-height); /* Direkt unter Header */
  left: 0;
  width: 100%;
  z-index: 995;
  display: none; /* Wird per JS (Toggle) eingeblendet */
}
.navigation ul {
  list-style: none;
  display: flex;
  flex-direction: var(--nav-orientation-mobile); /* Mobile: Column (vertikal) */
  justify-content: var(--nav-justify-content-mobile);
  align-items: center;
  width: 100%;
  padding: 0;
  margin: 0;
}
.navigation li {
  width: 100%; /* Sicherstellen, dass jedes Listenelement die volle Breite einnimmt */
  margin: 10px 0;
}
.navigation li a {
  display: block;
  width: 100%; /* Anchor füllt die gesamte Breite */
  padding: var(--nav-item-padding-mobile);
  color: var(--color-nav-text-mobile);
  text-decoration: none;
  text-align: var(--nav-text-align-mobile);
}
/* Hover-, Focus- und aktiver Zustand: Hintergrund füllt die ganze Zeile */
.navigation li a:hover,
.navigation li a:focus,
.navigation li.current a {
  background-color: rgba(255, 255, 255, 0.2);
  outline: none;
}

/* ==========================================================================
   6. MAIN CONTENT & SECTIONS
   Abstand und Formatierung des Hauptinhalts sowie der Sections.
   ========================================================================== */
main {
  margin-top: var(--main-margin-top-mobile);
  padding: 2rem;
  text-align: var(--content-text-align);
}
section {
  padding: 4rem 2rem;
  border-bottom: 1px solid var(--color-section-border);
  text-align: var(--section-text-align);
  /* Damit angeklickte Ankerziele nicht hinter dem fixierten Header + mobiler Navigation verschwinden */
  scroll-margin-top: calc(var(--header-height) + var(--nav-height-mobile-offset));
}
section:nth-child(even) {
  background: var(--color-section-alt-bg);
}

/* ==========================================================================
   7. FOOTER
   Standardformatierung für den Footer.
   ========================================================================== */
footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  text-align: var(--footer-text-align);
  padding: 1rem 2rem;
}

/* ==========================================================================
   8. RESPONSIVE STYLES – DESKTOP
   Ab einer Breite von 768px:
     - Der Toggle-Button wird ausgeblendet.
     - Die Navigation wird fixiert und dauerhaft sichtbar (bleibt beim
       Scrollen immer am gleichen Platz), horizontal ausgerichtet.
     - Die Textrichtung in der Navigation lässt sich zentral steuern.
   ========================================================================== */
@media (min-width: 768px) {
  /* Toggle-Button ausblenden */
  .menu-toggle {
    display: none;
  }
  /* Desktop-Navigation fixieren */
  .navigation {
    display: block !important;
    position: fixed; /* Bleibt beim Scrollen immer sichtbar */
    top: var(--header-height); /* Direkt unterhalb des Headers */
    left: 0;
    width: 100%;
    height: var(--nav-height-desktop);
    background: var(--color-nav-bg);
    z-index: 995;
  }
  .navigation ul {
    flex-direction: var(--nav-orientation-desktop); /* Desktop: Row (horizontal) */
    justify-content: var(--nav-justify-content-desktop);
    align-items: center;
  }
  .navigation li {
    margin: 0 var(--nav-item-margin-desktop);
    width: auto; /* In horizontaler Anordnung soll die Breite automatisch sein */
  }
  .navigation li a {
    width: auto; /* Anker passen sich dem Inhalt an */
    padding: var(--nav-item-padding-desktop);
    color: var(--color-nav-text-desktop);
    text-align: var(--nav-text-align-desktop);
  }
  main {
    margin-top: var(--main-margin-top-desktop);
  }
  /* Für Desktop können wir das Scroll-Margin für Section erhöhen */
  section {
    scroll-margin-top: calc(var(--header-height) + var(--nav-height-desktop) + 20px);
  }
}
/* ==========================================================================
   SCROLL-TO-TOP BUTTON
   Definiert den Button, der beim Scrollen in der rechten unteren Ecke erscheint.
   ==========================================================================
*/
.scroll-top {
  display: none; /* Standardmäßig ausgeblendet */
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--color-header-bg); /* Nutzt die Header-Farbe */
  color: var(--color-header-text);
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  font-size: 2rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: opacity 0.3s ease;
}

/* Optional: Hover-Effekt */
.scroll-top:hover,
.scroll-top:focus {
  background-color: rgba(52, 152, 219, 0.8);
  outline: none;
}


/* TESTING */

.feed-content {
  padding: 9px 9px;
}
a {
}
.feed-title {
  background: grey;
}
a {
  text-decoration: none;
  color: blue
}
.feed-item {
}