* {
  box-sizing: inherit;
}

html {   height: 100%; font-size: 100%; /* Sichert die 16px-Basis für Ihre rem-Umrechnungen */ }

body {
overflow-x: hidden; 
  
margin: 0 auto;
  
width: 100%;       /* Gewährleistet, dass der Body mobil die volle Breite nutzt */

background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),url(../images/BUV.PNG);
background-repeat:no-repeat;
background-attachment:fixed; 
background-size: cover;
text-align: center;
height: 100%;
}


#wrapper {
    text-align: left;
    width: 100%;            /* Nutzt auf kleinen Bildschirmen die volle Breite */
    max-width: 60rem;       /* Entspricht exakt den ursprünglichen 960px auf großen Bildschirmen */
    margin: 0 auto;         /* Zentriert den gesamten Wrapper auf dem Bildschirm */
    padding-left: 1.25rem;  /* Verhindert das Ankleben am Displayrand auf Mobilgeräten (20px) */
    padding-right: 1.25rem; /* Verhindert das Ankleben am Displayrand auf Mobilgeräten (20px) */
    padding-bottom: 2vh;    /* Bleibt dynamisch zur Viewport-Höhe */
    box-sizing: border-box; /* Verhindert, dass das Padding den Wrapper ungewollt verbreitert */
}

#fussbereich {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:#BBB;
  height: 2vh; 
  z-index: 6;
 }

.zindex {
  z-index: 10;
 filter: saturate(0.3);
opacity:0.9;
}


.left {
  margin: auto;
  width: 100%;
}
.center {
  margin: auto;
  width: 50%;
}

img.sticky {
  position: sticky;
  top: 0;
}

.sticky {
  position: sticky;
  top: 0;
}

.inv_txt{
 color:#c8c8c8;background-color: #444;
}

.box_txt{
  background-color: rgba(200, 200, 200, 0.2);
  width: auto;
  border: 1px solid rgb(150, 150, 150); /* 1px Rahmen kann für die Schärfe in px bleiben */
  border-radius: 0.125rem;               /* Entspricht 2px */
  padding: 0.625rem;                     /* Entspricht 10px */
  margin: 0.625rem;                      /* Entspricht 10px */
}


.shadowbox {
  width: 100%;                           /* Nutzt mobil den verfügbaren Platz */
  max-width: 15rem;                      /* Begrenzt die Breite auf maximal 240px (15 * 16) */
  border: 1px solid #333;                /* 1px Haarlinie bleibt für Pixelschärfe in px */
  box-shadow: 0.5rem 0.5rem 0.3125rem #444; /* Entspricht 8px 8px 5px */
  padding: 0.5rem 0.75rem;               /* Entspricht 8px (oben/unten) und 12px (links/rechts) */
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}

/* Nav Trigger */
.nav-trigger {
  /* critical styles - hide the checkbox input */
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
  /* Kritische Positionierung */
  position: fixed;
  left: 0.9375rem;                       /* Entspricht 15px */
  top: 0.9375rem;                        /* Entspricht 15px */
  z-index: 2;
  
  /* Optische Gestaltung des Buttons */
  height: 1.875rem;                      /* Entspricht 30px */
  width: 1.875rem;                       /* Entspricht 30px */
  cursor: pointer;
 
  background-size: contain;
}

/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
  transition: left 0.2s;
}

/* Navigation Trigger Zustände */
.nav-trigger:checked + label {
  left: 13.4375rem; /* Entspricht 215px */
}

.nav-trigger:checked ~ .site-wrap {
  left: 12.5rem;    /* Entspricht 200px */
}

/* Globale Link-Stile */
a:link { 
  color: black; 
  font-size: 0.75rem; /* Entspricht 12px */
  font-family: Verdana, Arial, Helvetica, sans-serif; 
  font-weight: bold; 
  text-decoration: none;
}

.b:link { 
  font-size: 0.875rem; /* Entspricht 14px */
  font-family: Verdana, Arial, Helvetica, sans-serif; 
  text-decoration: none; 
}

/* Hinweis: Schriftgrößen vereinheitlicht auf 0.75rem, um Layout-Springen zu verhindern */
a:visited { 
  color: #000; 
  font-size: 0.75rem; 
  font-family: Verdana, Arial, Helvetica, sans-serif; 
  font-weight: bold; 
  text-decoration: none; 
}

a:hover { 
  background-color: orange; 
  font-size: 0.75rem; 
  font-family: Verdana, Arial, Helvetica, sans-serif; 
  font-weight: bold; 
  text-decoration: none; 
}

a:active { 
  font-size: 0.75rem; 
  font-family: Verdana, Arial, Helvetica, sans-serif; 
  font-weight: bold; 
  text-decoration: none; 
}

/* Tabellen- und Element-Resets */
img { 
  border: 0; 
}

td, th {
  padding: 0;
}

/* Überschriften-Hierarchie */
h1 { 
  font-weight: 600; 
  font-size: 0.8125rem; /* Entspricht 13px */
}

h2 { 
  font-weight: 600; 
  font-size: 0.8125rem; /* Entspricht 13px */
  font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; 
}

h3 { 
  font-weight: normal; 
  font-size: 0.75rem; /* Entspricht 12px */
  font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; 
  text-decoration: none; 
}

h4 { 
  font-size: 0.75rem; /* Entspricht 12px */
  font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; 
  text-decoration: none; 
  background-position: 0 6rem; /* 72pt = 96px -> 96px / 16 = 6rem */
}

h5 {  
  font-weight: 900;
  font-size: 0.5rem; /* Entspricht 8px */
}

h6 { 
  font-weight: 600; 
  font-size: 0.8125rem; /* Entspricht 13px */
  font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; 
}

#navcontainer {
  width: 7.5rem;                         /* Auf rem vereinheitlicht */
  border-right: 1px solid #000;          /* 1px bleibt für Pixelschärfe */
  padding: 0 0 1rem 0;
  margin-bottom: 2rem;
  font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
  text-align: left;
  background-color: rgba(100, 100, 100, 0.2);
  color: #333;
}

#navcontainer ul {
  list-style: none;
  margin: 0;
  padding: 0.1875rem;                    /* Entspricht 3px */
  border: none;
}

#navcontainer li {
  border-bottom: 1px solid #909090;
  margin: 0;
}

#navcontainer li a {
  display: block;
  font-weight: 600;
  font-size: 0.8rem;                     /* Auf rem vereinheitlicht */
  padding: 1.5625rem 0.3125rem 0.3125rem 0.5rem; /* Entspricht 25px 5px 5px 0.5em */
  border-right: 0.375rem solid #555555;  /* Entspricht 6px */
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  width: 100%;
  border-radius: 0.1875rem;              /* Entspricht 3px */
  transition: all 0.6s ease 0s;
  text-align: center;
}

#navcontainer li a { 
  width: auto;                           /* Überschreibt die 100%-Breite laut Originalcode */
}

#navcontainer li a:hover {
  padding: 1.5625rem 0 0 0;              /* Entspricht 25px 0px 0px 0px */
  border-right: 0.625rem solid #EDEDED;  /* Entspricht 10px */
  background-color: rgba(250, 250, 250, 0.6);
  width: 100%;                           /* Setzt Breite beim Hovern wieder auf 100% (Verhalten beibehalten) */
  color: #000;
  box-shadow: 0.3125rem 0.3125rem 0.3125rem 0.3125rem #999999; /* Entspricht 5px 5px 5px 5px */
  margin: 0.625rem;                      /* Entspricht 10px */
}

/* Typografie und Listen */
p { 
  font-size: 0.8125rem;                 /* Entspricht 13px */
  font-family: Verdana, Arial, Helvetica, sans-serif; 
  text-decoration: none; 
  list-style-type: square; 
}

td { 
  font-size: 0.75rem;                  /* Entspricht 12px */
  font-family: Verdana, Arial, Helvetica, sans-serif; 
}

.adresse { 
  font-size: 0.6875rem;                /* Entspricht 11px */
  font-weight: 600; 
}

.list { 
  font-size: 0.75rem;                  /* Entspricht 12px */
  font-family: Verdana, Arial, Helvetica, sans-serif; 
  list-style-image: url(images/buv_button.jpg); 
  list-style-position: inside; 
  display: list-item; 
  white-space: nowrap; 
}

.usup { 
  display: none; 
}

/* ==========================================================================
   Layout-Elemente (Mobile-First-Ansatz)
   Standardmäßig fließen die Elemente auf Mobilgeräten normal untereinander.
   ========================================================================== */

#adresse { 
  width: 100%;                         /* Mobil volle Breite nutzen */
  max-width: 9.25rem;                  /* Begrenzung auf ursprüngliche Breite */
  height: auto;                        /* Inhalt bestimmt die Höhe flexibel */
  z-index: 2; 
  position: relative;                  /* Hebt absolute Platzierung mobil auf */
  visibility: visible; 
  margin: 1rem auto;                   /* Zentrierung mit Abstand */
}

#bilderzeile { 
  width: 100%;                         /* Verhindert horizontales Scrollen mobil */
  max-width: 62.5rem;                  /* Begrenzung auf Desktop-Größe (1000px) */
  height: auto; 
  z-index: 2; 
  position: relative;                  /* Hebt absolute Platzierung mobil auf */
  visibility: visible; 
}

#foerderturm { 
  width: 100%; 
  max-width: 10.625rem;                /* Ursprüngliche Breite (170px) */
  height: auto; 
  z-index: 4; 
  position: relative;                  /* Hebt absolute Platzierung mobil auf */
  visibility: visible; 
  display: block;
  margin: 1.25rem auto 0 auto;         /* Zentriert das Bild auf Mobilgeräten */
}

/* ==========================================================================
   Desktop-Erweiterung (ab einer Breite von 1024px / 64rem)
   Hier greifen die ursprünglichen, festen Positionierungen.
   ========================================================================== */
@media (min-width: 64rem) {
  #adresse { 
    position: absolute;
    height: 13.75rem;                  /* Entspricht 220px */
    width: 9.25rem;                    /* Entspricht 148px */
    left: 54.375rem;                   /* Entspricht 870px */
    top: 38.75rem;                     /* Entspricht 620px */
    margin: 0;
  }

  #bilderzeile { 
    position: absolute;
    height: 6.25rem;                   /* Entspricht 100px */
    width: 62.5rem;                    /* Entspricht 1000px */
    left: 1.125rem;                    /* Entspricht 18px */
    top: 9.0625rem;                    /* Entspricht 145px */
  }

  #foerderturm { 
    position: absolute;
    height: 12rem;                     /* Entspricht 192px */
    width: 10.625rem;                  /* Entspricht 170px */
    left: 0.1875rem;                   /* Entspricht 3px */
    top: 59.25rem;                     /* Entspricht 948px */
    float: right; 
    margin-bottom: 0; 
    margin-left: 1.25rem;              /* Entspricht 20px */
  }
}

/* ==========================================================================
   Kopfbereich und Überlagerungen (Mobile-First-Ansatz)
   ========================================================================== */

#kopf { 
  position: fixed;
  top: 0;
  left: 0;                             /* Mobil bündig am Rand */
  width: 100%;                         /* Volle Breite auf Smartphones */
  background-color: #F2F2F2; 
  opacity: 0.9;
  z-index: 3; 
  visibility: visible; 
  border-radius: 0.125rem;             /* Entspricht 2px */
  box-shadow: 0.3125rem 0.3125rem 0.3125rem #999999; /* Entspricht 5px 5px 5px */
}

#kopf2 { 
  height: 3.75rem;                     /* Entspricht 60px */
  width: 100%;                         /* Flexibel für mobile Bildschirme */
  z-index: 2; 
  position: relative;                  /* Normaler Fluss auf Mobilgeräten */
  visibility: visible; 
}

/* Grafiken/Elemente im Kopfbereich fließen mobil nebeneinander oder untereinander */
#sue1, #sue2, #cat {
  position: relative;                  /* Absolute Positionierung mobil deaktiviert */
  height: auto;
  width: auto;
  max-width: 100%;
  display: inline-block;               /* Ermöglicht das Nebeneinanderfließen */
  margin: 0.5rem;                      /* Flexibler Abstand für Touch-Bedienung */
  z-index: 3;
  visibility: visible;
}

/* ==========================================================================
   Desktop-Erweiterung (ab einer Breite von 1024px / 64rem)
   Stellt die exakte, pixelgenaue Positionierung der Desktop-Ansicht wieder her.
   ========================================================================== */
@media (min-width: 64rem) {
  #kopf { 
    width: 64.375rem;                  /* Entspricht 1030px */
    left: 1.5%; 
  }

  #kopf2 { 
    position: absolute;
    left: 1.125rem;                    /* Entspricht 18px */
    top: 0; 
    width: auto;
  }

  #sue1 { 
    position: absolute;
    height: 2.5rem;                    /* Entspricht 40px */
    width: 3.75rem;                    /* Entspricht 60px */
    left: 3.125rem;                    /* Entspricht 50px */
    top: 0.8125rem;                    /* Entspricht 13px */
    margin: 0;
  }

  #sue2 { 
    position: absolute;
    height: 2.5rem;                    /* Entspricht 40px */
    width: 3.75rem;                    /* Entspricht 60px */
    left: 58.125rem;                   /* Entspricht 930px */
    top: 0.8125rem;                    /* Entspricht 13px */
    margin: 0;
  }

  #cat {
    position: absolute;
    left: 11.875rem;                   /* Entspricht 190px */
    top: 6.375rem;                     /* Entspricht 102px */
    margin: 0;
  }
}


/* ==========================================================================
   Inhalts- und Hintergrund-Container (Mobile-First-Ansatz)
   ========================================================================== */

#weiss { 
  background: rgba(251, 251, 251, 0.7);
  z-index: 1; 
  position: relative;                  /* Ermöglicht normalen Fluss auf Mobilgeräten */
  top: 0;
  left: 0;
  width: 100%;                         /* Nutzt mobil die volle Breite des Bildschirms */
  max-width: 53.125rem;                /* Begrenzung auf Desktop-Größe (850px) */
  height: auto;                        /* Inhalt bestimmt die Höhe flexibel, kein Abschneiden */
  visibility: visible; 
  margin: 1rem auto;                   /* Zentriert die weiße Box mobil mit Abstand */
  padding: 1rem;                       /* Innenabstand für Text auf Smartphones */
  box-sizing: border-box;

  border-radius: 0.125rem;             /* Entspricht 2px */
  box-shadow: 0.125rem 0.125rem 0.125rem #999999; /* Entspricht 2px 2px 2px */
}

#text {
  z-index: 2;
  position: relative;                  /* Schachtelt sich mobil sauber in #weiss ein */
  top: 0;
  left: 0;
  width: 100%;                         /* Volle Breite innerhalb von #weiss */
  max-width: 50rem;                    /* Begrenzung auf Desktop-Größe (800px) */
  height: auto;                        /* Verhindert starre Höhenbegrenzung mobil */
  visibility: visible;
  text-align: left;                    /* Setzt zentrierten Text aus dem Body zurück */
}

#rund {
  border-radius: 0.125rem;             /* Entspricht 2px */
  box-shadow: 0.125rem 0.125rem 0.125rem #999999; /* Entspricht 2px 2px 2px */
  filter: blur(0.625rem);              /* Entspricht 10px */
}

/* ==========================================================================
   Desktop-Erweiterung (ab einer Breite von 1024px / 64rem)
   Stellt die exakte, pixelgenaue Positionierung der Desktop-Ansicht wieder her.
   ========================================================================== */
@media (min-width: 64rem) {
  #weiss { 
    position: absolute;
    height: 54.25rem;                  /* Entspricht 868px */
    width: 53.125rem;                  /* Entspricht 850px */
    top: 5rem;                         /* Entspricht 80px */
    left: 9.9375rem;                   /* Entspricht 159px */
    margin: 0;
    padding: 0;                        /* Setzt den mobilen Innenabstand zurück */
  }

  #text {
    position: absolute;
    height: 55.625rem;                 /* Entspricht 890px */
    width: 50rem;                      /* Entspricht 800px */
    left: 12rem;                       /* Entspricht 192px */
    top: 6.25rem;                      /* Entspricht 100px */
  }
}


/* ==========================================================================
   Navigation, Copyright und Zusatzinformationen (Mobile-First-Ansatz)
   ========================================================================== */

#navi { 
  width: 100%;                         /* Mobil die volle Breite nutzen */
  max-width: 7.5rem;                   /* Begrenzung auf ursprüngliche Breite (120px) */
  height: auto;                        /* Inhalt bestimmt die Höhe flexibel */
  z-index: 2; 
  position: relative;                  /* Normaler Fluss auf Mobilgeräten */
  visibility: visible;
  border-radius: 0.125rem;             /* Entspricht 2px */
  margin: 1rem auto;                   /* Zentriert die Navigation auf Mobilgeräten */
}

#copyright {
  text-decoration: none;
  width: 100%;                         /* Verhindert horizontales Scrollen auf Smartphones */
  max-width: 34.375rem;                /* Begrenzung auf Desktop-Breite (550px) */
  height: auto;
  z-index: 4;
  position: relative;                  /* Hebt absolute Platzierung mobil auf */
  visibility: visible;
  margin: 0.5rem auto;                 /* Zentriert den Text mobil */
  text-align: center;
}

#w3c { 
  text-decoration: none; 
  height: auto;                        /* Mobil flexibel nach Inhalt */
  width: 100%; 
  max-width: 37.5rem;                  /* 60vh entspricht im Desktop-Schnitt ca. 600px -> 37.5rem */
  z-index: 4; 
  position: relative;                  /* Hebt absolute Platzierung mobil auf */
  visibility: visible;
  margin: 1rem auto;                   /* Platzierung am unteren Ende im Fluss */
}

#adresse2 { 
  width: 100%; 
  max-width: 9.0625rem;                /* Ursprüngliche Breite (145px) */
  height: auto; 
  z-index: 2; 
  position: relative;                  /* Hebt absolute Platzierung mobil auf */
  visibility: visible; 
  margin: 1rem auto;                   /* Zentriert das Element mobil */
}

/* ==========================================================================
   Desktop-Erweiterung (ab einer Breite von 1024px / 64rem)
   Stellt die exakte, pixelgenaue Positionierung der Desktop-Ansicht wieder her.
   ========================================================================== */
@media (min-width: 64rem) {
  #navi { 
    position: absolute;
    height: 21.875rem;                 /* Entspricht 350px */
    width: 7.5rem;                     /* Entspricht 120px */
    left: 1.875rem;                    /* Entspricht 30px */
    top: 6.5625rem;                    /* Entspricht 105px */
    margin: 0;
  }

  #copyright {
    position: absolute;
    height: 0.9375rem;                 /* Entspricht 15px */
    width: 34.375rem;                  /* Entspricht 550px */
    left: 23.75rem;                    /* Entspricht 380px */
    top: 6.875rem;                     /* Entspricht 110px */
    margin: 0;
    text-align: left;                  /* Setzt die Ausrichtung für Desktop zurück */
  }

  #w3c { 
    position: absolute;
    height: 3vh;                       /* Behält die Viewport-Höhe auf Desktop bei */
    width: 60vh;                       /* Behält die Viewport-Breite auf Desktop bei */
    left: 0.125rem;                    /* Entspricht 2px */
    top: 70.75rem;                     /* Entspricht 1132px */
    margin: 0;
  }

  #adresse2 { 
    position: absolute;
    height: 10.625rem;                 /* Entspricht 170px */
    width: 9.0625rem;                  /* Entspricht 145px */
    left: 54.375rem;                   /* Entspricht 870px */
    top: 15.625rem;                    /* Entspricht 250px */
    margin: 0;
  }
}

@media screen and (orientation: portrait) {
  
  #cat { 
    position: relative;                /* Auf Smartphones relativ im Fluss */
    left: auto;                        /* Verhindert starres Herausschieben */
    display: block;
    margin: 0.5rem auto;               /* Zentriert das Element im Hochformat */
  }
  
  #navi { 
    position: relative;
    left: 0.0625rem;                   /* Entspricht 1px */
    width: 100%;
    max-width: 7.5rem;                 /* Begrenzt die Breite auf Mobilgeräten */
    margin: 0 auto;
  }
  
  #navcontainer { 
    width: 6rem;                       /* Auf rem vereinheitlicht (entspricht 6em) */
  }

  #navcontainer li a { 
    padding: 1.5625rem 0.0625rem 0.125rem 0.5rem; /* Entspricht 25px 1px 2px 0.5em */
  }

  #weiss { 
    position: relative;                /* Verhindert Überlappungen im Hochformat */
    width: 100%;                       /* Nutzt die volle Smartphone-Breite */
    max-width: 46.875rem;              /* Begrenzung auf maximal 750px */
    height: auto;                      /* Inhalt bestimmt die Höhe flexibel ohne Abschneiden */
    top: 0;                            /* Nutzt den natürlichen Fluss statt starrer 180px */
    left: 0;
    margin: 1rem auto;                 /* Zentriert die Box im Hochformat */
    z-index: 1; 
    visibility: visible; 
  }
  
  #text { 
    position: relative;
    left: 0;                           /* Setzt die starren 100px links zurück */
    width: 90%;                        /* Etwas mehr Platz für Text auf schmalen Displays */
    margin: 0 auto;                    /* Zentriert den Textbereich innerhalb von #weiss */
  }
  
  #foerderturm { 
    position: relative;                /* Verhindert, dass das Bild bei top: 948px festsitzt */
    width: 100%;
    max-width: 10.625rem;              /* Entspricht 170px */
    height: auto;                      /* Entspricht proportional 192px */
    left: 0; 
    top: 0;                            /* Hebt die starre Positionierung auf */
    z-index: 1; 
    visibility: visible; 
    float: none;                       /* Schaltet Float im Hochformat ab */
    margin: 1.5rem auto 0 auto;        /* Zentriert den Förderturm unter dem Text */
  }
  
  #kopf { 
    left: 0.0625rem;                   /* Entspricht 1px */
    top: 0.0625rem;                    /* Entspricht 1px */
    width: 100%;                       /* Erstreckt sich im Hochformat über die volle Breite */
  }
}