body {
    font-family: sans-serif;
    margin: 0 auto;
    padding: 0;
    background: #434343;
    color: #333;
    max-width: 1400px;
    overflow-x: hidden;
}
img#headpic {
    width: 70%;
    height: auto;
}
header {
    background: #fff;
    text-align: center;
    border-bottom: 2px solid #ccc;
}
header p {
    padding-left: 5px;
    padding-right: 5px;
}

section#sectionright {
    float: right;
}

section#sectionLeft {
    float: left;
    width: 20%;
    clear: both;
}
main {
    margin-top: 5px;
}
video {
    max-width: 93%;
}
img#artiklepic {
    max-width: 100%;
    height: auto;
    width: 100%;
}
section {
    margin-bottom: 2rem;
    background: #fff;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    width: 73%;
}
footer {
    background: #eee;
    text-align: center;
    padding: 1rem;
    font-size: 0.9rem;
    clear: both;
}
.kontaktformular {
    max-width: 600px;
    margin: 2rem auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.kontaktformular input,
.kontaktformular textarea {
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
}

.kontaktformular button {
    padding: 0.75rem;
    background-color: #5c8bff;
    color: white;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}

.kontaktformular button:hover {
    background-color: #3f6de0;
}

.success {
    text-align: center;
    color: green;
}

.error {
    text-align: center;
    color: red;
}
        nav {
    background-color: #222;
    color: white;
    display: flex;
    justify-content: center;
    padding: 10px 0;
    font-family: sans-serif;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
}
nav ul {
    list-style-type: none;
    margin: 5px 10px;
    padding: 0;
    display: flex;
    gap: 20px;
    flex-direction: row;
    flex-wrap: wrap;
}
        nav ul li {
            display: inline;
        }
        nav ul li a {
            color: white;
            text-decoration: none;
            padding: 6px 12px;
            border-radius: 4px;
            transition: background-color 0.3s;
        }
        nav ul li a:hover {
            background-color: #444;
        }
div#aktenzeichen {
    position: absolute;
    top: 0px;
    text-align: left;
    margin-left: 5%;
    font-size: xxx-large;
    font-weight: 700;
    color: white;
    max-width: 1400px;
}
header div#nameofakte {
    position: absolute;
    top: 35%;
    text-align: left;
    font-size: xxx-large;
    font-weight: 700;
    color: white;
    max-width: 1400px;
    margin-left: 5%;
}
div#nameofrolle {
    position: absolute;
    top: 45%;
    text-align: left;
    left: 20%;
    font-size: xxx-large;
    font-weight: 700;
    color: white;
}
div#forwuerfe {
    position: absolute;
    top: 60%;
    text-align: left;
    margin-left: 5%;
    font-size: x-large;
    font-weight: 700;
    color: white;
    max-width: 1400px;
}
.fallakte-vorwort {
    font-family: "Segoe UI", Roboto, sans-serif;
    background: #fafafa;
    border: 2px solid #c0392b;
    border-radius: 16px;
    padding: 24px 28px;
    margin: 30px auto;
    max-width: 100%;
    width: 94%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    line-height: 1.6;
    color: #222;
    float: left;
}
div#mainmenu {
    clear: both;
}

  span[id^=showVideoLink] {
    color: blue;
    cursor: pointer;
}
    /* Der Container ist standardmäßig ausgeblendet */
[id^=videoContainer] {
    position: fixed;
    bottom: -100%;
    left: calc(46.5% - 285px);
    width: 60%;
    max-width: 1040px;
    background: #000;
    transition: all 0.5s ease;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
    z-index: 1000;
}
[id^=showVideoLink] {
    text-decoration: unset;
    font-size: 20px;
}
/* Sichtbar, fährt hoch */
[id^=videoContainer].show {
  bottom: 0;
}

/* Minimiert: bleibt klein unten rechts */
[id^=videoContainer].minimized {
  width: 300px;
  height: 170px;
  bottom: 20px;
  right: 20px;
  left: auto;
  border-radius: 10px;
  overflow: hidden;
}
div#backtop {
    display: block;
    position: fixed;
    top: 350px;
    right: 5px;
    background: #000000;
}
section#sectionLeft strong {
    font-weight: 600;
    font-size: inherit;
}
.video-header {
    display: flex;
    justify-content: flex-end;
    background: #222;
    color: #fff;
    /* padding: 5px 10px; */
    font-size: 14px;
    cursor: default;
    position: relative;
    z-index: 9999;
}
div#teacherpic img {
    max-width: 375px !important;
}
div#teacherpic {
    text-align: center;
    width: 100%;
}
.video-header span {
  margin-left: 10px;
  cursor: pointer;
}

[id^=sentinelVideo] {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 800px;
    z-index: 10;
    position: relative;
}
.hidden { display: none; }
.cookie-banner,
.cookie-settings {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #f0f0f0;
border-top: 2px solid #ccc;
padding: 1em;
z-index: 1000;
font-family: sans-serif;
}
.cookie-banner__actions button,
.cookie-settings button {
margin: 0.5em;
}
code {
    font-size: 18px;
}
strong {
    font-size: 20px;
}
h1, h2, h3 {
color: #434343;
}
blockquote {
background: #f9f9f9;
border-left: 5px solid #ccc;
padding: 1em;
margin: 1.5em 0;
font-style: italic;
}
.hinweis {
background: #fff3cd;
border: 1px solid #ffeeba;
padding: 1em;
margin: 2em 0;
color: #856404;
}
video {
    max-width: 100%;
}
img#raansware {
    max-width: 100% !important;
}
ul#alllinks div {
    color: #434343;
    cursor: pointer;
    font-weight: bold;
}
.outerhr {
    background-color: #222;
    color: white;
    display: none;
    justify-content: center;
    padding: 10px 0;
    font-family: sans-serif;
}
div hr {
    background-color: #222;
    color: white;
    display: flex;
    justify-content: center;
    padding: 5px 0;
    font-family: sans-serif;
}
img#imgsoft {
    max-width: 100%;
}
div#openbachrichtdiv {
    clear: both;
}
div#boomundende {
    position: absolute;
    margin-top: -220px;
    font-size: 55px;
    left: 32%;
    color: red;
}
span.datespan {
    display: block;
    float: right;
    position: relative;
    top: -33px;
    margin-right: 25px;
    background-color: #434343 !important;
}
section#sectionLeft a {
    text-decoration-line: none;
    color: #434343;
}
div#onimageheader {
    background: #000;
    font-size: 22px;
    display: block;
    position: absolute;
    color: #fff;
    top: 5px;
    margin-left: 25px;
    max-width: 1400px;
}
div#diviconpin {
    display: block;
    position: static;
    font-size: 30px;
    margin-left: 220px;
    margin-top: -38px;
}
div#pintrueartikel li {
    position: relative;
    transform: rotate(-4deg);
}
div#pintrueartikel {
    margin-bottom: 55px;
}


div#angepintes {
    display: block;
    position: relative;
    margin-left: -20px;
    margin-top: -30px;
    margin-bottom: 10px;
    font-size: 20px;
    margin-left: -40px;
}
img.articleimages {
    max-width: 99%;
}
  section#sectionright span[id^=showArtikteVideoLink] {
    display: block;
    position: absolute;
    max-width: 65px;
    width: 100px;
    height: 50px;
    margin-left: 5px;
    margin-top: 25px;
    z-index: 10;
    background: url(https://sicherheitsgigant.de/image/artikleinvideo.png);
    background-size: cover;
    cursor: pointer;
}
section#sectionright span.showVideoLink {
    display: block;
    position: absolute;
    max-width: 65px;
    width: 40px;
    height: 31px;
    margin-left: 5px;
    margin-top: 25px;
    z-index: 10;
    background: url(https://sicherheitsgigant.de/image/artikleinvideo.png);
    background-size: cover;
    cursor: pointer;
}
div#pintrueartikel li {
    margin-bottom: 15px !important;
}
div.newwindows {
    position: absolute;
    margin-top: 16px;
    margin-left: -52px;
    font-size: 19px;
}
.anhaengediver img {
    max-width: 49%;
}
.anhaengediver {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
}
div#searchingdiver {
    background-color: #1a1a1a !important;
    border: 1px solid #333;
    text-align: left;
    padding-left: 25px;
}


/* Der Darkmode-Look */
body.dark-mode {
    background-color: #050505 !important; /* Fast tiefschwarz */
    color: #00ff41 !important; /* Hacker-Grün oder nimm #e0e0e0 für hellgrau */
    font-family: 'Courier New', Courier, monospace; /* Optional: Terminal-Look */
}

/* Anpassung der Container/Boxen im Darkmode */
body.dark-mode main, body.dark-mode section {
    background-color: #1a1a1a !important;
    border: 1px solid #333;
    box-shadow: 0 0 10px rgba(0, 255, 65, 0.2); /* Leichtes grünes Glühen */
}
body.dark-mode ul#alllinks div {
    color: #a79898;
    cursor: pointer;
    font-weight: bold;
} body.dark-mode ul#alllinks section#sectionLeft a, body.dark-mode section#sectionLeft a, body.dark-mode h1, body.dark-mode  h2, body.dark-mode h3 {
    color: #a79898 !important; } 
body.dark-mode span[id^=showVideoLink] {
    color: #ffb588 !important;
}
/*body.dark-mode .fallakte-vorwort, body.dark-mode section#sectionright strong, body.dark-mode .fallakte-vorwort .abschluss { color: #a79898 !important; }*/
body.dark-mode .fallakte-vorwort, body.dark-mode .fallakte-vorwort strong { color: #a79898 !important; }
body.dark-mode div#openbachrichtdiv blockquote { color: #434343 !important; }
 body.dark-mode .fallakte-vorwort a {color: #8181af !important;} body.dark-mode .fallakte-vorwort ul {
    list-style-type: "§ ";
    margin-left: 25px;
    margin-top: 10px;
    color: #b9a4a4;
}  body.dark-mode .hinweis {cursor: pointer; color: #000}
/* Der Flacker-Effekt (Wie eine kaputte Lampe) 
@keyframes flickerAnimation {
    0%   { opacity: 1; filter: brightness(100%); }
    3%   { opacity: 0.1; filter: brightness(10%); background-color: #000; }
    6%   { opacity: 1; }
    7%   { opacity: 0.1; }
    9%   { opacity: 1; }
    10%  { opacity: 0.1; }
    11%  { opacity: 1; }
    50%  { opacity: 1; }
    55%  { opacity: 0.3; }
    56%  { opacity: 1; }
    100% { opacity: 1; background-color: #050505; color: #00ff41; }
}

.system-failure {
    animation: flickerAnimation 1.5s forwards;
    pointer-events: none; 
    }
    /* Verhindert Klicks während der Animation */


#sectionLeft #alllinks span[id^=showVideoLink] {
    display: block;
    position: absolute;
    max-width: 40px;
    width: 30px;
    height: 45px;
    right: -15px;
    margin-left: -33px;
    margin-top: -45px;
    z-index: 10;
    background: url(https://sicherheitsgigant.de/image/sentinel4sites.png);
    background-size: contain;
}
body.dark-mode div#plaeceholderdiv a.back-to-tops {
    color: darkorange;
}
body.dark-mode documents a {
    color: aqua;
    text-decoration: none;
}

body.dark-mode footer {
    background: #1a1a1a;
    text-align: center;
    padding: 1rem;
    font-size: 0.9rem;
    clear: both;
}


body.dark-mode footer a {
    color: #8181af !important;
}
section.archiveselection {
    text-align: right;
}
strong#fallaktetxtstrong {
    width: 275px;
    display: block;
    left: -35px;
    position: relative;
}
#videoContainerAll ul#alllinks li {
    position: relative;
    left: 0%;
    margin-left: 5px;
    max-width: 280px;
    width: 280px;
    /* transform: rotate(-30deg); */
    background-color: #050505;
    margin-top: 0px;
    bottom: -16px;
    z-index: 999;
}
#videoContainerAll ul#alllinks {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}


/* Container muss relativ sein, damit absolute Positionen im Desktop funktionieren */
#videoContainerAll ul#alllinks {
   margin-top: 10px !important;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Standard: normale Listendarstellung (Mobile) */
#videoContainerAll ul#alllinks li {
  opacity: 0;
  transform: translateY(-20px);
  transition: transform 1600ms cubic-bezier(.2,.9,.2,1), opacity 1600ms ease;
  will-change: transform, opacity;
}

/* Wenn ein LI "aktiv" ist */
#videoContainerAll ul#alllinks li.fly-in {
  opacity: 1;
  transform: translate(0, 0);
}
.sharebox a img, .sharebox button img {
    max-width: 20px;
    margin-right: 5px;
}

.sharebox{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 14px;
}
.sharebox a, .sharebox button {
    padding: 7px 10px;
    border: 1px solid #cfcfcf;
    border-radius: 10px;
    background: #f7f7f7;
    cursor: pointer;
    text-decoration: none;
    font-size: 20px;
    color: #111;
    display: inline-flex;
    align-content: space-around;
    justify-content: space-between;
    align-items: center;
}
.sharebox a:hover,
.sharebox button:hover{ background:#eee; }

/*div#plaeceholderdiv, div#artikel {
    margin-bottom: 200px;
}*/
/* Desktop-Layout: wir "parken" die LIs absolut und fliegen sie von links rein */
html {
  font-size: clamp(15px, 1.1vw, 18px);
}
div#plaeceholderdiv h2, div#artikel article div h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  line-height: 1.25;
  margin: 0.8em 0 0.4em;
}

div#plaeceholderdiv h3, div#artikel article div h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  line-height: 1.4;
  margin: 0.6em 0 0.4em;
}
div#plaeceholderdiv p, div#artikel article div p {
    font-size: 1rem;
    line-height: 1.65;
    margin: 0.6em 0;
    max-width: 106ch;
}

div#plaeceholderdiv code, div#artikel article div code {
  font-size: 0.95em;
}
div#plaeceholderdiv blockquote, div#artikel article div blockquote {
  font-size: 1.05em;
  line-height: 1.6;
}
.textZoom {
    display: none;
    position: relative;
    left: 82%;
    max-width: 110px;
}
button#txtReset {
    width: 98%;
}
.textZoom button {
    background-color: #00ff41 !important;
    font-size: 20px;
}
.textZoom {
    display: block;
    position: fixed;
    left: 89%;
    max-width: 120px;
    top: 35px;
    width: min-content;
    background-color: #434343;
    padding: 5px 5px;
}
li#unser_hashtag {
    color: cornflowerblue;font-size: smaller;
}
@media (max-width: 750px) {
[id^=showVideoLink] {
    text-decoration: unset;
    font-size: 35px;
}
li#unser_hashtag {
    color: cornflowerblue;
font-size: x-large;
}
li.sozialmedialinks{
    font-size: larger;
}
div#plaeceholderdiv p, div#artikel article div p {
    font-size: 1rem;
    line-height: 1.65;
    margin: 0.6em 0;
    max-width: 50ch;
}
div#plaeceholderdiv, div#artikel article div {
    line-height: 1.7;
  }
.video-header {
    font-size: 130%;
}
span.shareicons {
    display: none;
}
body.dark-mode ul#alllinks div {
    color: #a79898;
    cursor: pointer;
    font-weight: bold;
    font-size: 22px;
}
.sharebox a, .sharebox button {
    padding: 0px 0px;
    border: 1px solid #cfcfcf;
    border-radius: 10px;
    background: #f7f7f7;
    cursor: pointer;
    text-decoration: none;
    font-size: 38px;
    color: #111;
    display: inline-flex;
    align-content: space-around;
    justify-content: space-between;
    align-items: center;
    width: 12%;
}
.sharebox a img, .sharebox button img {
    max-width: 55px;
    margin-right: 0px;
}
.anhaengediver img {
    max-width: 360px;
}
.anhaengediver {
    display: block;
    position: relative;
    max-width: 400px;
    flex-direction: unset;
    flex-wrap: unset;
    align-content: unset;
    align-items: unset;
}
div#diviconpin {
    display: block;
    position: absolute;
    font-size: 30px;
    margin-right: 10px;
    margin-top: -40px;
    right: 0;
}
div#anwaltjaoderneindiv img, div#verfzweiterundediv img {
    max-width: 100% !important;
}
section#sectionLeft {
    float: left;
    width: 95%;
    clear: both;
}
div#onimageheader {
    background: #000;
    font-size: 15px;
    display: block;
    position: absolute;
    color: #fff;
    top: 5px;
    margin-left: 25px;
    max-width: 1400px;
}
section {
    margin-bottom: 2rem;
    background: #fff;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    width: 95%;
}


div#aktenzeichen {
    position: absolute;
    top: 0px;
    text-align: left;
    margin-left: 5%;
    font-size: large;
    font-weight: 700;
    color: white;
    max-width: 1400px;
}
div#nameofrolle {
    position: absolute;
    top: 10%;
    text-align: left;
    left: 20%;
    max-width: 68%;
    font-size: large;
    font-weight: 700;
    color: white;
}

div#nameofakte {
    position: absolute;
    top: 35%;
    text-align: left;
    right: 30%;
    font-size: xxx-large;
    font-weight: 700;
    color: white;
}
header div#nameofakte {
    position: absolute;
    top: 12%;
    text-align: left;
    font-size: large;
    font-weight: 700;
    color: white;
    max-width: 1400px;
    margin-left: 5%;
}
div#forwuerfe {
    position: absolute;
    top: 17%;
    text-align: left;
    margin-left: 5%;
    font-size: large;
    font-weight: 700;
    color: white;
    max-width: 1400px;
}
.fallakte-vorwort {
    font-family: "Segoe UI", Roboto, sans-serif;
    background: #fafafa;
    border: 2px solid #c0392b;
    border-radius: 16px;
    padding: 24px 28px;
    margin: 0px -22px;
    max-width: 100%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    line-height: 1.6;
    color: #222;
    float: left;
}
[id^=videoContainer] {
    position: fixed;
    bottom: -100%;
    left: 0%;
    width: 100%;
    max-width: 655px;
    background: #000;
    transition: all 0.5s ease;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
    z-index: 1000;
    margin: 0 auto;
}
span.datespan {
    display: block;
    float: unset;
    position: relative;
    top: 0px;
}
article img {
    width: 95%;
}

section#sectionright span[id^=showArtikteVideoLink] {
    display: block;
    position: absolute;
    max-width: 65px;
    width: 50px;
    height: 40px;
    margin-left: 5px;
    margin-top: 25px;
    z-index: 10;
    background: url(https://sicherheitsgigant.de/image/artikleinvideo.png);
    background-size: cover;
    cursor: pointer;
}
div#plaeceholderdiv, div#artikel {
    overflow-wrap: break-word;
}

  #videoContainerAll ul#alllinks {
    margin-top: 40px !important;
    min-height: 220px; /* je nach Anzahl / Schriftgröße anpassen */
  }

  #videoContainerAll ul#alllinks li {
    /*position: absolute;*/
    left: 0;                  /* Ziel links 0 */
    transform: translateX(-200%); /* Start weit links */
    opacity: 0;
  }

  #videoContainerAll ul#alllinks li.fly-in {
    transform: translateX(0);
    opacity: 1;
  }
}

.tagbox {
    margin-left: -45px;
}
input#keyword {
    width: 99%;
    padding-left: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #fff;
    color: #434343 !important;
    font-size: 20px;
    border-top-left-radius: 25px;
    border-bottom-right-radius: 25px;
    border-color: #000;
    border-bottom: 1px solid #000;
    text-align: center;
}
body.dark-mode input#keyword {
    width: 99%;
    padding-left: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #434343;
    color: #ffb588 !important;
    font-size: 20px;
    border-top-left-radius: 25px;
    border-bottom-right-radius: 25px;
    border-color: transparent;
    border-bottom: 1px solid #ffffff;
    text-align: center;
}
button#btnFind {
    width: 100%;
    background-color: #fff;
    color: #000 !important;
    font-size: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    border-bottom-left-radius: 25px;
    border-top-right-radius: 25px;
    border-color: #000;
    border-top: 1px solid #000;
}

body.dark-mode button#btnFind {
    width: 100%;
    background-color: #434343;
    color: #00ff41 !important;
    font-size: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    border-bottom-left-radius: 25px;
    border-top-right-radius: 25px;
    border-color: transparent;
    border-top: 1px solid #ffffff;
}