/* ==========================================================================
   1. GLOBALER VIEWPORT-LOCK & SCROLLBAR-KILLER
   ========================================================================== */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  overflow: hidden !important; /* Hauptseite darf nicht scrollen */
  overscroll-behavior: none !important; /* Blockiert Gummiband-Effekt beim Wischen */
}

/* Deaktiviert die Scrollbalken-Anzeige auf Systemebene im gesamten Dokument */
html *, body * {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html *::-webkit-scrollbar, body *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ==========================================================================
   2. DESIGN-REPARATUR FÜR DEN BODY
   ========================================================================== */
body {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  font-family: montserrat, sans-serif !important;
  letter-spacing: .15em !important;
  background-color: var(--farbe-3, #250606) !important;
}

body::after {
  content: "" !important;
  position: fixed !important;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: -9 !important; 
  pointer-events: none !important;
  opacity: 0.95 !important;
  background-image: 
    radial-gradient(
        circle at 50% 28%,
        #a61c1c 0%,        
        #3b0505 32%,       
        var(--farbe-3, #250606) 55%,
        #050000 92%        
    ), 
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://w3.org id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E") !important;
  background-blend-mode: normal, overlay !important;
}

body::before {
  content: "§" !important;
  position: fixed !important;
  bottom: -6vh !important;   
  right: -2vw !important;    
  font-size: clamp(30rem, 52vh, 62rem) !important; 
  font-family: "Montserrat", sans-serif !important;
  font-weight: 100 !important; 
  color: rgba(197, 197, 152, 1) !important; 
  z-index: -10 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   3. MAIN-CONTAINER (Der neue, unsichtbare Scroll-Bereich)
   ========================================================================== */
main {
  flex-grow: 1 !important;
  display: block !important; /* Block-Layout erlaubt natürliches Scrollen des Inhalts */
  width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  margin: 0 !important;
  
  /* 🎯 JETZT HIER: Das unsichtbare Scrollen fängt lange Texte ab. 
     Der äußere Viewport bleibt gesperrt, Wischen verursacht keinen Balken. */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ==========================================================================
   4. DER TEXTCONTAINER (Wächst natürlich mit dem Text mit)
   ========================================================================== */
#datenschutz-text, main > div, main > section {
  width: 90% !important;
  max-width: 1400px !important;
  box-sizing: border-box !important;
  background-color: #d8d9df !important; 
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  
  /* Der weinrote Rahmen umschließt den Text jetzt wieder komplett bis ganz unten */
  border: 2px solid #250606 !important;
  border-radius: 6px !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4) !important;
  
  /* 🎯 BEHOBEN: Keine starre Box-Höhe mehr! Der Rahmen wandert mit dem Textende mit. */
  height: auto !important;
  max-height: none !important;
  overflow: visible !important; 
}

/* Textformatierung innerhalb der Box */
#datenschutz-text *, #datenschutz-text p, #datenschutz-text div, #datenschutz-text li,
main > div *, main > section * {
  font-family: inherit !important;
  line-height: 1.8 !important;  
  text-align: justify !important; 
  color: #2b2b2b !important; 
}

.h2-datenschutz, #datenschutz-text h2, main h2 {
  color: #250606 !important; 
  font-family: "Montserrat", sans-serif !important;
  margin-top: 3.5vh !important;   
  margin-bottom: 1.5vh !important;
  font-size: clamp(1rem, 1.2vw, 1.25rem) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-bottom: 1px solid rgba(37, 6, 6, 0.12) !important;
  padding-bottom: 4px !important;
}

.liste-datenschutz { 
  margin-left: 2vw !important;
  margin-bottom: 2vh !important;
}

.liste-datenschutz li {
  margin-bottom: 8px !important;
}

#impressum-kontakt, #impressum-kontakt p, #ustid, #ustid p {
  text-align: left !important;
  word-break: break-word !important;
  hyphens: auto !important;
}

a.recht-text:link, a.recht-text:visited, #datenschutz-text a, main a { 
  color: #250606 !important; 
  text-decoration: none !important;
  border-bottom: 1px dashed #250606 !important;
  font-weight: 500 !important;
}

a.recht-text:hover, a.recht-text:active, #datenschutz-text a:hover, main a:hover {
  color: #000000 !important;
  border-bottom-style: solid !important;
}

/* ==========================================================================
   5. RESPONSIVE POSITIONIERUNG & ABSTÄNDE (Über Main gesteuert)
   ========================================================================== */

/* --- GLOBALER SCHUTZPUFFER (Zwingt den Inhalt in jedem Zustand unter den Header) --- */
main {
  padding-top: 30px !important;
}

/* --- SMARTPHONES & TABLETS (Unter 600px Breite - Hochformat) --- */
@media screen and (max-width: 599px) {
  #datenschutz-text *, main > div *, main > section * {
    font-size: calc(12px + (16 - 12) * ((100vw - 320px) / (599 - 320))) !important;
  }
  
  #datenschutz-text, main > div, main > section {
    padding: 10px 15px 10px 15px !important; 
    /* Nutzt die Headerhöhe plus echten Zusatz-Abstand, voll zentriert */
    margin: var(--header-height, 125px) auto 80px auto !important;
  }
}

/* --- MOBILE LANDSCAPE WEICHE (Smartphones quer bis 999px Breite) --- */
@media screen and (orientation: landscape) and (max-width: 999px) and (max-height: 480px) {
  main {
    padding-top: 15px !important; /* Etwas flacher im Querformat */
  }

  #datenschutz-text, main > div, main > section {
    padding: 15px 20px 40px 20px !important;
    /* Nutzt den flachen Landscape-Header, voll zentriert */
    margin: var(--header-height, 40px) auto 60px auto !important;
  }
}

/* --- DESKTOP-MONITORE (Ab 600px Breite) --- */
@media screen and (min-width: 600px) {
  main {
    padding-top: 50px !important; /* Großzügiger Freiraum für große Bildschirme */
  }

  #datenschutz-text *, main > div *, main > section * {
    font-size: calc(13px + (17 - 13) * ((100vw - 600px) / (1250 - 600))) !important;
  }
  
  #datenschutz-text, main > div, main > section {
    padding: 45px 50px 80px 50px !important;
    
    /* 🎯 DIE ULTIMATIVE REPARATUR:
       Wir verwerfen die fehlerhafte Minus-Formel komplett. 
       Die Box startet jetzt exakt unter der echten Header-Höhe, 
       ist durch 'auto' perfekt zentriert und hat unten 140px Platz zum Scrollen! */
    margin: var(--header-height, 190px) auto 140px auto !important;
  }
}