:root {
    --ortsname: "Obergladbach";
    --ff-font: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    --ff-weiss: hsl(41, 36%, 91%);
    --ff-rot: hsl(4, 68%, 39%);
    --ff-gold: hsl(54, 87%, 58%);
}

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
/*  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;*/
  line-height: 1.4;
  font-size: 1.2em;
  /*max-width: 800px;*/
  height: 100%;
  margin: 20px auto;
  padding: 0 10px;
  color: #363636;
  background: #fff;
}

h1 {
  font-size: 2.2em;
  margin-top: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  color: var(--ff-weiss);
  margin-bottom: 12px;
  margin-top: 24px;
  font-weight: 600;
}

a {
  text-decoration: none;
  color: var(--ff-gold);
}

a:hover {
  /*text-decoration: underline;*/
}

img, video {
  max-width: 100%;
  height: auto;
}

code {
  background: #efefef;
  padding: 2.5px 5px;
  border-radius: 6px;
}

nav {
    background: #A72920;
    height: 80px;
    width: 100%;
}

label.hamburg { 
   display: none;
   background: #555; 
   width: 75px; 
   height: 50px; 
   position: relative; 
   margin-left: auto; 
   margin-right: auto;
   border-radius: 4px; 
}

span#FF::before {
    content: "Freiwillige Feuerwehr";
}

span#FF::after {
    content: var(--ortsname);
    white-space: nowrap; 
    overflow: hidden;
    text-overflow:ellipsis;
}

span#FN::after {
    content: var(--ortsname);
}

nav input#check {
    display: none;
}

.line { 
   position: absolute; 
   left:10px;
   height: 4px; width: 55px; 
   background: #fff; border-radius: 2px;
   display: block; 
   transition: 0.5s; 
   transform-origin: center; 
}

.line:nth-child(1) { top: 12px; }
.line:nth-child(2) { top: 24px; }
.line:nth-child(3) { top: 36px; }

#check:checked + .hamburg .line:nth-child(1){
   transform: translateY(12px) rotate(-45deg);
}

#check:checked + .hamburg .line:nth-child(2){
   opacity:0;
}

#check:checked + .hamburg .line:nth-child(3){
   transform: translateY(-12px) rotate(45deg);
}

label.logo {
    color: white;
    font-size: 35px;
    line-height: 80px;
    padding: 0 80px;
    font-weight: bold;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
}

label.logo a {
    color: var(--ff-weiss);
}

@media screen and (min-width:900px) { 
   /* Zusätzliche Regeln noch kleinere Monitore */ 
    body { 
    line-height: 1.2
    }

    label.logo::after {
    display: inline-block;
    content: " ✆ 112";
    margin-left: 12px;
    text-align: right;
    }
}

body {     
  color: white;
  display: flex;
  flex-direction: column;
  overflow: hidden;       
  background: url(https://cdn.ffw.red/gimme/69217a3079908094e11121d042354a7c1f55b6482ca1a51e1b250dfd1ed0eef9%401.5.550/image_2025-01-05_12-12-05.jpg) no-repeat;     
  background-size: cover;     
}

#menu {
    width: 100%;
}
 
nav ul {
    display: inline-table;
    width: 100%;
    float: left;     
  padding: 0px;     
  list-style: none;
  height: 40px;     
  background-color: transparent;     
  opacity: .8;     
  line-height: 40px;     
  text-align: justify;     
  font-size: 20px;  
} 

nav ul li {
    display: table-cell;
    vertical-align: middle;     
  float: left;     
  width: 250px;     
  height: 40px;     
  background-color: black;     
  opacity: .8;     
  line-height: 40px;     
  text-align:center;     
  font-size: 20px; 
} 

nav ul li a {
  text-decoration: none;     
  color: white;     
  display: block; 
}


.checkbtn {
    font-size: 30px;
    color: white;
    float: right;
    line-height: 80px;
    margin-right: 40px;
    cursor: pointer;
    display: none;  
}

#check {
    display: none;  
}

#check label {
    display: none;
}

nav ul li a:hover {     
  background-color: var(--ff-rot);     
  cursor: pointer; 
} 

nav ul li ul li {     
  display: none; 
} 

nav ul li:hover ul li {     
  display: block; 
}

nav ul::after {
    text-align: justify;
    content: "";
    margin-left: 100%;
    border-radius: 0px 0px 30px 0px;
}

#domain {
  margin: auto;
}

#domain a {
  color: #888;
}

.banner {
  width: 100%;
}

.experimental {
  margin: 3em 0;
  padding: 1em;
  border: 4px dashed red;
  color: red;
  font-weight: bold;
}

.cta-button, .cta-button:hover, .cta-button:visited {
    border: 1.5px solid #a4c2d0;
    border-radius: 5px;
    padding: 10px;
    display: inline-block;
    margin: 10px 0;

    background: linear-gradient(120deg, #77888f, #364e59);
    color: white !important;
    font-weight: bold;
}

@media (max-width:999px){
    .checkbtn{
        display: none;
    }
    
    label.logo{
        font-size:25px;
        padding: 0 30px;
    }
    
    span#FF::before {
        content: "FF";    
    }    
    
    nav ul li a{
        font-size:16px;
    }
    
}

@media (max-width:858px){
    
    .checkbtn{
        display: block;
    }
    
    label.hamburg { 
        display: block;
    }
    
    nav ul{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 80px;
        left:-100%;
        text-align: center;
        transition: all .3s; 
        
    }
    nav ul li{
        display: block;
        margin:50px 0;
        line-height: 30px;
    }
    
    nav ul li a {
        font-size: 20px;
    }
    
    nav ul li ul li {     
        display: contents; 
    } 
    
    a.active, a:hover{
        background: none;
        color: var(--ff-gold);
        text-decoration: none;
    }
    
    #check:checked~ul{
        left:0;
    }
}


main {
    flex: 1;
    margin-left: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    
    scrollbar-color: black black;
    scrollbar-width: thin;
}

main p {
    margin-top: 1.2em;
}

main ul {
    list-style: "🔥";
    margin-left: 1em;
}

main::-webkit-scrollbar {
    background-color: black;
}

div.toc::before {
    display: inline-block;
    content: "Inhalt";
    font-size: 1.2em;
    font-weight: bold;
    color: white;
    margin-top: 2vw;
}

div.toc ul {
    display: none;
    font-family: var(--ff-font);
}

div.toc:hover ul {
    display: block;
}

footer {
    display: table;
    margin-top: auto;
    min-height: 64px;
    bottom: 3px;
    background: black;
    opacity: .8;
    margin: auto;
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

footer div {
    display: table-cell;
    vertical-align: middle;
    margin-top: auto;
}

#signet {
    margin-top: 0px;
    margin-left: 10px;
    height: 96px;
    width: 96px;
    float: left;
    vertical-align: middle;
    background: url("1734983784728.png") no-repeat;
    background-size: cover;
}

/*Diese Anweisung gilt für alle Listenelemente ungeordneter Listen der Klasse lightbox: Alles, was innerhalb von Listenpunkten der Klasse lightbox steht, wird mit diesem Befehl auf 0 gesetzt;*/ ul.lightbox li {
 overflow: hidden;  /*scrollbalken ausschalten */
 position: absolute; /* Absolute Positionierung */
 width: 0;   /*Breite auf 0 */
 height: 0;   /*Höhe auf 0 */
 left: 0;   /*Position von Links 0 */
 top: 0;   /*Position von Oben: 0 */
 opacity: 0; /*Transparenz ausgeschaltet */ 
 list-style: none; /*Listenpunkt ausgeschaltet */ 
 display: inline; /*Listenelemente (Bilder) nebeneinander */ 
}

/* Durch die Pseudoklasse "target" (:target) am Listenpunkt li wird definiert, was passiert, wenn
man auf den Bereich klickt, der von dem Listenpunkt umschlossen wird. Klickt man noch mal darauf,
kommt diese Einstellung nicht mehr zur Anwendung. */

ul.lightbox li:target {
  width: 100%;
  height: 100%;
  opacity: 1;                     /* Transparenz 100% */
  background: rgba(0, 0, 0, 0.8); /* Hintergrundfarbe und Transp. 80% */
   -moz-transition: opacity 1.5s; /* Zeitdauer für firefox*/
  -o-transition: opacity 1.5s;    /*... für Opera */
  -webkit-transition: opacity 1.5s; /*... für Smartphone, tablet, google*/
}

ul.lightbox li:target a {
  position: absolute;
  top: 50%; /*zentriert das Bild von oben */
  left: 50%; /*zentriert das Bild von links */
  margin: -400px 0 0 -400px; /* nach oben und links um 300px */
  border: 15px solid #fff; /Weißer Rand von 15px Breite um das Bild */
  -moz-box-shadow:0 1px 8px #000000; /* Schattenbox Mozilla */
  -o-box-shadow:0 1px 8px #000000; /* Opera... */
  -webkit-box-shadow:0 1px 8px #000000; /*google etc. */
}

/*Raucheffekt*/

section{ height:100vh; background: 
#000;
}
section:before{ content: ''; position: 
absolute; top: 0; left: 0; width: 
100%; height: 100%; background-image: 
linear-gradient(to top, #cf4f53 , 
#bf6c6e, #b47e7f, #a68c8d, #999999, 
#ffffff);
mix-blend-mode: color; pointer-events: 
none;
}