/* ===================================================
   DEIN GESAMTER CSS-CODE — FIXED HEADER & MOBILE REPAIRS
   (Ersetzt deine vorhandene CSS-Datei vollständig)
   =================================================== */

/* Grundlegendes */
body {
  margin: 0;
  height: 100%;
  font-family: "neue-haas-grotesk-text", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #111;
}

/* FULLSCREEN-SECTION (gemeinsam) */
.fullscreen {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "inhalt";
  justify-items: center;
  align-items: center;
  position: relative;
  transition: height 1s;
}

/* Klickbarer Bereich über dem Bild */
.fullscreen a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
}

.fullscreen__titel {
  margin: 0;
}

body[data-menue="overview"] .fullscreen {
  height: 100px !important;
  transition: height 1s;
}

/* -----------------------------
     Desktop / Large (>=700px)
     ----------------------------- */
@media all and (min-width: 700px) {
  .fullscreen {
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  .fullscreen img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }

  /* Header (Desktop) */
  header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background: none;
    padding: 20px 0 0 60px;
    width: auto;
  }

  /* entnestete Navigation-Regeln (gültiges CSS) */
  header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 25px;
  }

  header nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 20px;
    font-weight: 400;
  }

  header nav ul li a:hover {
    opacity: 0.7;
  }

  /* Titel anzeigen (Desktop) */
  .fullscreen__titel {
    position: relative;
    z-index: 3;
    color: white;
    font-size: 2.5rem;
  }

  .fullscreen__titel:hover {
    opacity: 0.7;
  }
}

/* ===================================================
     MOBILE RULES (unter 700px)
     — steht AM ENDE damit es andere Regeln überschreibt
     — gültiges CSS, unverschachtelt, mit !important wo nötig
     =================================================== */

@media all and (max-width: 699px) {
  /* ----------------------------
       Header: fixed, weiß, links oben
       ---------------------------- */
  header,
  .site-header,
  header.site-header,
  header.fixed,
  .header--fixed,
  .is-fixed,
  .sticky,
  header[role="banner"],
  .navbar,
  .topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    z-index: 9999 !important;
    width: 100% !important;
    background: none !important;
    padding: 12px 16px !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* Falls Inline-styles vorhanden sind, überschreiben wir sie */
  header[style],
  .site-header[style] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
  }

  /* Navigation links (entnestet, gültig) */
  header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 18px;
    align-items: center;
  }

  /* Link-Farbe & responsive (proportional) Schriftgröße */
  header nav ul li a {
    color: white !important;
    text-decoration: none !important;
    /* proportional: Clamp zwischen 14px und 18px */
    font-size: clamp(14px, 3.2vw, 18px) !important;
    font-weight: 400 !important;
  }

  /* Wenn dein Header links oben eng sitzen soll, stelle Padding links ein */
  /* Beispiel: 16px links — passe an falls nötig */
  header {
    padding-left: 16px !important;
  }

  /* Platz für den fixed Header: falls Content darunter verdeckt wird,
       kannst du dem ersten FULLSCREEN eine top-offset-Klasse geben oder hier global pushen.
       Wir setzen einen CSS-Variable-basierten Push, der nur wirkt, wenn nötig. */
  :root {
    --mobile-header-height: 56px;
  }

  /* WICHTIG: Wir schieben nicht pauschal alle Inhalte runter, weil du möchtest,
       dass die Bilder weiterhin fullscreen sichtbar unter dem Header liegen.
       Falls du Teile bewusst unter dem Header willst, entferne die nächste Regel. */
  /* .content, main, .site-content { padding-top: calc(var(--mobile-header-height)); } */

  /* ----------------------------
       Bilder: bleiben fullscreen (kein Abstand)
       ---------------------------- */
  .fullscreen {
    width: 100% !important;
    height: 100vh !important; /* exakt wie Desktop */
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
  }

  .fullscreen img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }

  .fullscreen a {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    z-index: 2 !important;
  }

  /* ----------------------------
       Titel: weiß, zentriert, proportional (Skalierung per clamp)
       ---------------------------- */
  .fullscreen__titel {
    position: relative !important;
    z-index: 3 !important;
    color: white !important;
    text-align: center !important;
    /* Proportional: min 1.1rem, prefer 4.5vw, max 1.8rem */
    font-size: clamp(1.1rem, 4.5vw, 1.8rem) !important;
    margin: 0 !important;
    width: 100% !important;
    line-height: 1.05 !important;
  }

  /* Falls du willst, dass der Titel immer vertikal zentriert bleibt
       innerhalb der fullscreen-Section, kannst du das so setzen: */
  .fullscreen .titel-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none; /* damit Links unter dem Titel noch klickbar sind */
    z-index: 3;
  }

  /* Kleines optisches Tuning: Links im Header leicht dunkler beim Hover */
  header nav ul li a:hover {
    opacity: 0.85 !important;
  }
}

/* ===================================================
     ENDE
     =================================================== */