/* ==========================================================================
   GLOBALEN CSS-VARIABLEN (CUSTOM PROPERTIES)
   ========================================================================== */
:root {
  /* Farbdefinitionen */
  --schrift: #bbbbbb;           /* Standard-Textfarbe (Hellgrau) */
  --underline: tomato;          /* Akzentfarbe für Unterstreichungen */
  --hg: #0a0a0a;                /* Haupt-Hintergrundfarbe (Sehr dunkles Grau/Schwarz) */
  --boxen: #1f1d1d;             /* Hintergrundfarbe für Boxen/Container */
  --tabelle: #2b2b2b;           /* Hintergrundfarbe für Tabellen */
  --pfeil: #9c9292;              /* Farbe für Symbole/Pfeile */
  --error: #d33030;              /* Signalfarbe für Fehlermeldungen (Rot) */

  /* Schriftarten-Familien */
  --raleway: "Raleway", sans-serif;
  --playfair: "Playfair Display", serif;
  --display: "DM Serif Display", serif;
  --grechen-fuemen: "Grechen Fuemen", serif;
}

/* ==========================================================================
   GRUNDLEGENDES & RESET-REGELN
   ========================================================================== */

/* Universal-Reset für Box-Sizing, Außen- und Innenabstände */
*,
*::before,
*::after {
  box-sizing: border-box; /* Inkludiert Padding und Border in die Gesamtbreite/Höhe */
  margin: 0;              /* Entfernt Standard-Außenabstände */
  padding: 0;             /* Entfernt Standard-Innenabstände */
}

/* Verhindert automatische Schriftgrößenanpassung auf mobilen Geräten (z. B. iOS Safari) */
html {
  text-size-adjust: 100%;
}

/* Basis-Styling für den Body */
body {
  margin: auto;
  background-color: var(--hg);
  color: var(--schrift);
  font-family: var(--raleway);
  font-size: 15px;
  letter-spacing: 1px;    /* Zeichenabstand leicht erhöht */
}

/* Medien-Elemente flexibel an ihren Container anpassen */
img,
video {
  max-width: 100%;        /* Verhindert ein Überlaufen des Containers */
  height: auto;           /* Behält das ursprüngliche Seitenverhältnis bei */
}

/* Zentrierter Hauptinhaltsbereich mit maximaler Breite */
.inhalt {
  max-width: 800px;
  margin: auto;
  padding: 10px;
}

/* Dynamischer Abstandshalter mit clamp(minimum, bevorzugt, maximum) */
.abstand {
  height: clamp(1.25rem, 4vw, 4.5rem);
}

/* ==========================================================================
   ÜBERSCHRIFTEN
   ========================================================================== */

/* Gemeinsame Eigenschaften aller Überschriften */
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--raleway);
  letter-spacing: 0.125rem;
  line-height: 1.3;
}

/* Spezifische Farben für Überschriftenebenen */
h1,
h2 {
  color: var(--pfeil);
}

h3,
h4,
h5 {
  color: var(--schrift);
}

/* Überschrift 1: Dynamische Schriftgröße je nach Bildschirmbreite */
h1 {
  font-size: clamp(1.25rem, 1.25rem + 0.9375vw, 2.375rem);
  font-weight: 500;
  line-height: 1.1;
}

/* Überschrift 2 */
h2 {
  font-size: 25px;
  font-weight: 600;
}

/* Überschrift 3 */
h3 {
  font-size: 18px;
  font-weight: 500;
}

/* Überschrift 4 */
h4 {
  font-size: 18px;
  font-weight: 400;
}

/* ==========================================================================
   TEXT-STYLING & TYPOGRAFIE
   ========================================================================== */

/* Standard-Absätze, Listenpunkte und Links */
p,
li,
a {
  color: var(--schrift);
  font-family: var(--raleway);
  font-size: clamp(0.938rem, 0.725rem + 0.5vw, 1.063rem); /* Dynamische Textgröße */
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 1px;
  text-align: justify;    /* Blocksatz */
  text-decoration: none;   /* Unterstreichung bei Links entfernen */
  hyphens: auto;           /* Automatische Silbentrennung aktivieren */
  overflow-wrap: break-word; /* Lange Wörter bei Bedarf umbrechen */
}

/* Bei schmalen Bildschirmen (<= 450px) Blocksatz auf Linksbindung umstellen */
@media (max-width: 450px) {
  p {
    text-align: left;
  }
}

/* Bildunterschriften */
figcaption {
  margin-top: -3px;
  margin-left: 5px;
  color: var(--schrift);
  font-family: var(--raleway);
  font-size: 12px;
  font-style: italic;
  font-weight: 200;
  line-height: 20px;
  letter-spacing: 1px;
}

/* Klasse für expliziten Blocksatz */
.blocksatz {
  text-align: justify;
  hyphens: auto;
}

/* Bei sehr kleinen Bildschirmen (<= 350px) Blocksatz deaktivieren */
@media (max-width: 350px) {
  .blocksatz {
    text-align: left;
  }
}

/* Kleine Akzentzeile/Hilfsklasse */
.akzent {
  margin-bottom: -8px;
  margin-left: 5px;
  color: var(--schrift);
}

/* Hervorgehobener Text */
.fett {
  font-size: 17px;
  font-style: italic;
  font-weight: 500;
  line-height: 24px;
}

/* Durchgestrichener Text */
.selektor {
  text-decoration: line-through;
}

/* ==========================================================================
   SCROLL-NACH-OBEN BUTTON
   ========================================================================== */

.scroll-to-top {
  position: fixed;        /* Bleibt beim Scrollen an fester Position */
  right: 30px;
  bottom: 30px;
  z-index: 1000;         /* Stellt sicher, dass der Button über anderem Inhalt liegt */
  display: flex;
  align-items: center;    /* Vertikale Zentrierung des Pfeils */
  justify-content: center;/* Horizontale Zentrierung des Pfeils */
  width: 35px;
  height: 35px;
  border: none;
  border-radius: 50%;     /* Macht den Button kreisrund */
  background-color: var(--pfeil);
  color: var(--schrift);
  cursor: pointer;
  opacity: 0;             /* Standardmäßig unsichtbar */
  visibility: hidden;     /* Für Screenreader/Interaktionen ausblenden */
  font-size: 25px;
  font-weight: 800;
  transition: all 0.3s;   /* Sanfte Übergänge für Animationen */
}

/* Zustand, wenn der Button eingeblendet wird */
.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
}

/* Hover-Effekt des Buttons */
.scroll-to-top:hover {
  background-color: var(--pfeil-hover); /* Hinweis: Variable --pfeil-hover muss im :root definiert sein */
  transform: translateY(-2px);          /* Minimales Anheben nach oben */
}

/* Anpassung des Buttons auf Mobilgeräten */
@media (max-width: 768px) {
  .scroll-to-top {
    right: 20px;
    bottom: 20px;
    width: 30px;
    height: 30px;
    font-size: 18px;
  }
}

/* ==========================================================================
   BILD MIT TEXT-OVERLAY
   ========================================================================== */

/* Relativer Container für absolute Positionierung des Textes darin */
.bild-container {
  position: relative;
  display: inline-block;
}

.bild-container img {
  display: block;
  width: 100%;
  height: auto;
}

/* Überlagertes Text-Element über dem Bild */
.text-overlay {
  position: absolute;
  color: #ffffff1a;      /* Sehr transparente weiße Schrift */
  font-family: var(--raleway);
  font-size: clamp(1.25rem, 4.28571vw - 0.0892857rem, 5rem);
  font-weight: 800;
  line-height: clamp(0.625rem, 4.375vw - 0.195313rem, 5rem);
  letter-spacing: 5px;
  -webkit-text-stroke: 1px var(--schrift); /* Erzeugt eine Textkontur/Umrandung */
}

/* Positionierungs-Klasse: Oben links */
.oben-links {
  top: 20px;
  left: 30px;
}

/* Responsive Anpassung des Overlay-Textes */
@media (max-width: 750px) {
  .text-overlay {
    color: var(--schrift);
    font-size: 20px;
    font-weight: 300;
    line-height: 22px;
    letter-spacing: 2px;
  }

  .oben-links {
    top: 8px;
    left: 30px;
  }
}

/* Auf sehr kleinen Bildschirmen Bild und Overlay ausblenden */
@media (max-width: 450px) {
  .text-overlay,
  .bild-container {
    display: none;
  }
}

/* ==========================================================================
   NAVIGATION (NAVBAR)
   ========================================================================== */

/* Haupt-Navigationsleiste */
.navbar {
  position: sticky;      /* Heftet die Navigation oben an beim Scrollen */
  top: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1920px;
  margin: -4px auto auto;
  padding: 5px;
  background-color: var(--hg);
  color: var(--schrift);
}

/* Linker Bereich (Logo / Markenname) */
.navbar-brand {
  display: flex;
  align-items: center;
}

/* Rechter Bereich (Navigationslinks) */
.navbar-re {
  display: flex;
  gap: 20px;              /* Abstand zwischen den Navigationslinks */
  margin-right: 30px;
}

.navbar-re a {
  color: var(--schrift) !important;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.3s;
}

/* Hover- und Active-Zustand auf Desktop */
.navbar-re a:hover,
.navbar-re a.active {
  border-bottom: thin solid var(--underline) !important; /* Unterstreichungs-Effekt */
  text-decoration: none;
}

/* Hamburger-Menü-Icon (Standardmäßig ausgeblendet) */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
  cursor: pointer;
}

/* Einzelne Balken des Hamburger-Icons */
.hamburger .bar {
  width: 100%;
  height: 3px;
  border-radius: 10px;
  background-color: var(--schrift);
}

/* Mobile Navigation (Responsive Anpassung <= 900px) */
@media (max-width: 900px) {
  .navbar {
    z-index: 99;
    padding: 1rem;
  }

  /* Hamburger-Button sichtbar machen */
  .hamburger {
    display: flex;
  }

  /* Navigationsmenü als ausklappbares Dropdown gestalten */
  .navbar-re {
    position: absolute;
    top: 60px;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 0;         /* Standardmäßig eingeklappt (Höhe 0) */
    overflow: hidden;      /* Inhalt außerhalb des Bereichs verbergen */
    background-color: var(--hg);
    text-align: center;
    transition: max-height 0.3s ease-out; /* Sanftes Aufklappen */
  }

  /* Klasse zum Ausklappen des mobilen Menüs (per JavaScript umzuschalten) */
  .navbar-re.active {
    max-height: 650px;
  }

  .navbar-re a {
    display: block;
    padding: 1rem;
  }

  /* Spezifischer Hover- & Active-Zustand für mobile Geräte */
  .navbar-re a:hover,
  .navbar-re a.active {
    color: var(--schrift-bl) !important; /* Hinweis: Variable --schrift-bl muss definiert sein */
    border-bottom: none !important;      /* Entfernt den Desktop-Unterstrich */
  }
}

/* ==========================================================================
   FOOTER (FUSSZEILE)
   ========================================================================== */

.fusszeile {
  max-width: 1920px;
  margin: auto;
  background-color: var(--boxen);
  text-align: center;
}

.fusszeile-inhalt {
  max-width: 1400px;
  margin: auto;
  text-align: center;
}

/* Logo-Galerie im Footer */
.footer-logos {
  display: flex;
  flex-wrap: wrap;        /* Umbruch bei kleineren Bildschirmen erlauben */
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 0 10px;
}

/* Styling der einzelnen Logos */
.logo-abstand {
  width: auto;
  max-height: 80px;
  padding: 8px;
  object-fit: contain;    /* Behält Seitenverhältnis des Bildes im Rahmen bei */
}

/* Verlinkungsbereich im Footer */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

/* Spezielles Text-Styling im Footer */
.schrift {
  color: var(--schrift-w); /* Hinweis: Variable --schrift-w muss definiert sein */
  font-style: italic;
  font-weight: 300;
}

.schrift:hover {
  color: var(--schrift);
  text-decoration: underline;
}

/* Responsive Footer-Anpassungen (Tablet / Mobile) */
@media (max-width: 768px) {
  .fusszeile {
    width: 100%;
    overflow: hidden;
  }

  .logo-abstand {
    max-height: 55px;
    padding: 4px;
  }

  .footer-logos {
    gap: 10px;
  }

  .footer-links {
    gap: 15px;
  }

  .schrift {
    font-size: 14px;
  }
}

/* Zusätzliche Skalierung für sehr kleine Displays */
@media (max-width: 500px) {
  .logo-abstand {
    max-height: 35px;
  }
}

/* ==========================================================================
   iOS / SAFARI SPEZIFISCHE FIXES
   ========================================================================== */

/* Zielgruppen-Gegenmaßnahme für WebKit/Safari auf Mobilgeräten */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    .logo-abstand {
      width: auto;
      height: auto;
      max-height: 35px !important;
      flex-shrink: 1;             /* Erlaubt dem Logo zu schrumpfen */
      object-fit: contain;
    }
  }
}

/* Spezifische Korrektur für iOS-Geräte mit hoher Pixeldichte (Retina Displays) */
@media only screen
  and (max-width: 768px)
  and (-webkit-min-device-pixel-ratio: 3) {

  .logo-abstand {
    width: auto;
    height: auto;
    max-height: 40px !important;
    flex-shrink: 1;
    object-fit: contain;
  }
}