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;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 20px;
    background: #828282;
    color: white;
    cursor: pointer;
    font-weight: 600;
}
    /* 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: 35px;
}

/* 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;
    bottom: -5px;
    right: 0px;
    background: #000000;
    z-index: 9999;
}
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 !important; }
.cookie-banner,
.cookie-settings {
position: fixed;
top: 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: -40px;
    margin-top: -38px;
    overflow: unset !important;
    transform: rotateY(159deg);
    translate: -94% 7%;
}
div#pintrueartikel li {
    position: relative;
    transform: rotate(4deg);
}
div#pintrueartikel {
    margin-bottom: 55px;
    overflow: unset !important;
}


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: 12px;
    margin-left: -55px;
    font-size: 27px;
}
.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; }
body.dark-mode span[id^=showVideoLink] {
    color: #fff !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;
}
button#txtReset {
    width: 40px;
}
.textZoom button {
    background-color: #00ff41 !important;
    font-size: 20px;
    float: left;
}
.textZoom {
    display: inline-flex;
    position: relative;
    bottom: 0px;
    width: auto;
    z-index: 99999;
    margin-left: 5px;
}
li#unser_hashtag {
    color: cornflowerblue;font-size: smaller;
}

  div#weathermain {
    display: block;
    position: absolute;
    top: 0;
    right: 4%;
}
div#weathermain div#name {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
}
div#weathermain div#name h3, div#weathermain div#weathertemp h3 {
    color: #00ff41 !important;
}
div#weathermain div#weathertemp {
    display: block;
    position: absolute;
    top: 25px;
    right: 0;
}
div#weathermain div#wetterstatusTXT {
    display: block;
    position: absolute;
    top: 70px;
    right: 0;
}
div#showsecuregiantsettings {
    display: flex;
    position: absolute;
    top: 5px;
    right: 7px;
    font-size: 30px;
    background-color: black;
    border-radius: 25px;
    cursor: pointer;
    flex-direction: column;
}
div#allsettingsdiv {
    display: flex;
    position: fixed;
    height: 90%;
    margin: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: flex-start;
    top: 0%;
    left: 0%;
    background-color: #434343;
    padding: 40px;
    z-index: 9999;
}
div#allsettingsdiv span {
    position: absolute;
    right: 5px;
    top: 5px;
    cursor: pointer;
}
div#allsettingsdiv h3 {
    margin-top: -16px;
    color: red !important;
}
label[name=weatherzoneinput], div#allsettingsdivout {
    width: 100%;
    display: block;
    background-color: #434343;
}
div#weatherimg img {
    opacity: 0.8;
}
textarea#eventLog {
    width: 100%;
}
article ul#alllinks li {
    max-width: 44%;
    width: 450px;
}
article ul#alllinks {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    flex-direction: row;
    margin-left: -20px;
}
span#sentinelAutorun, span#sentinelAutorunInf {
    display: block;
    float: left;
    position: relative;
    max-width: 50px;
    width: 50px;
    height: 75px;
    left: 0px;
    background: url(https://sicherheitsgigant.de/image/sentinel4sites.png);
    background-size: contain;
    cursor: pointer;
    /* background-color: #fff; */
    filter: sepia(1);
}
div#idofsentispan {
    position: relative;
    display: block;
    height: 55px;
    width: 50px;
    cursor: pointer;
    font-size: 15px;
}
.videocontrolerOfSeninel {
    display: flex;
    position: relative;
    width: auto;
    z-index: 99999;
    margin-left: 0px;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap;
}
.playlistOfSeninel {
    display: block;
    position: relative;
    bottom: 20px;
    width: auto;
    height: 80px;
    z-index: 99999;
    margin-left: 5px;
    margin-right: 5px;
}
div#bottomtitlebox {
    display: block;
    position: relative;
    z-index: 99999;
    width: auto;
    color: black;
    margin-left: 25px;
    margin-top: 7px;
    font-weight: 700;
}
div#infostobottom {
    display: flex;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background-color: aqua;
    height: 35px;
    z-index: 9999;
    align-content: space-around;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
}
div#infodiverNews {
    display: flex;
    position: fixed;
    top: 100px;
    right: 0px;
    max-height: 50px !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-direction: row;
    text-align: right;
    padding-right: 15px;
    overflow: hidden;
    cursor: pointer;
    font-size: clamp(14px, 1.1vw, 16px);
}
div#infodiverNews span#sentinelAutorunInf {
    height: 51px;
    width: 30px;
    margin-left: 20px;
}

div#allsettingsdivout div.selectedVideoArticle img, div#allsettingsdivin div.selectedVideoArticle img {
    max-width: 100px;
    height: fit-content;
}
div#allsettingsdivout .selectedVideoArticle:after {
    content: " 👇 ";
    right: 0px;
    position: absolute;
}
div#allsettingsdivin .selectedVideoArticle:after {
    content: " 👆 ";
    right: 0px;
    position: absolute;
}
div#allsettingsdivout div.selectedVideoArticle {
    display: flex;
    position: relative;
    border: 1px solid lightgreen;
    margin-top: 5px;
    padding-right: 30px;
    cursor: pointer;
}
div#allsettingsdivin div.selectedVideoArticle {
    display: flex;
    position: relative;
    border: 1px solid lightgreen;
    margin-top: 5px;
    padding-right: 30px;
    cursor: pointer;
}
div#allsettingsdivout {
    position: relative;
    display: block;
    overflow-y: scroll;
    max-height: 300px;
    max-width: 100%;
    margin-top: 10px;
    float: unset;
    margin-right: 1%;
}
div#allsettingsdivin {
    position: relative;
    display: block;
    overflow-y: scroll;
    max-height: 300px;
    max-width: 100%;
    margin-top: 10px;
}
div#videoplaconsole {
    position: relative;
    margin-top: 15px;
    font-size: 24px;
    cursor: pointer;
    left: 0%;
    background-color: dimgrey;
    width: max-content;
    padding-right: 15px;
    padding-bottom: 3px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
div#allsettingsdivout .selectedVideoArticle strong, div#allsettingsdivin .selectedVideoArticle strong {
    display: contents;
}
input#weatherzoneinput, button#btnweatherzoneFind {
    display: flex;
    margin-bottom: 25px;
}
div#generatePlaylist {
    margin-top: 10px;
    font-size: 24px;
    color: orange;
    font-weight: 600;
}
div#generatePlaylisttxt {
    margin-top: 30px;
}
div#nogeneratePlaylistback, div#nogeneratePlaylistplay, div#nogeneratePlaylistnext {
    display: block;
    position: relative;
    font-size: calc(1.2rem * var(--article-scale)) !important;
    cursor: pointer;
}
button#cancelBtn {
    position: absolute;
    z-index: 9999;
    top: 57%;
    left: 45%;
    background-color: #00ff41 !important;
    color: #000;
    font-size: 22px;
    font-weight: 700;
}
div#displaytxt {
    position: absolute;
    top: 40%;
    left: 0%;
    text-align: center;
    width: 100%;
    font-size: calc(clamp(1.6rem, 3.5vw, 2.2rem) * var(--article-scale)) !important;
    font-weight: 600;
    z-index: 9999;
    align-items: center;
    background-color: rgb(0 0 0 / 54%);
}
div#display {
    position: absolute;
    text-align: center;
    width: 100%;
    top: 48%;
    left: 0%;
    font-size: calc(clamp(1.6rem, 3.5vw, 2.2rem) * var(--article-scale)) !important;
    font-weight: 600;
    z-index: 9999;
    align-items: center;
    background-color: rgb(0 0 0 / 54%);
}
span#playonebackvid, span#playonenextvid, span#playlasvid, span#colopseclose, span#colopseopen, span#pausedlasvid {
    font-size: 32px;
    cursor: pointer;
}
div#nogeneratePlaylistreadall {
    margin-top: 20px;
    font-size: 24px;
    color: orange;
    font-weight: 600;
    cursor: pointer;
    background-color: dimgrey;
    width: max-content;
    padding-right: 15px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
span#setalltolist {
    display: block;
    margin-top: 25px;
    left: -55px;
    position: relative;
    color: ghostwhite;
    font-weight: 600;
    cursor: pointer;
    background-color: dimgrey;
    width: max-content;
    padding-right: 15px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.generated-label {
    display: block;
    position: relative;
    margin-top: 15px;
    margin-bottom: 50px;
    width: 100%;
    text-align: right;
}
.generated-lastlabel {
    display: block;
    position: relative;
    margin-top: 15px;
    margin-bottom: 15px;
    width: 100%;
    text-align: right;
}
img.ste-signature {
    display: block;
    position: relative;
    width: 40%;
    margin-top: 100px;
    height: 81px;
    margin-left: -5px;
}
.pdfdownloadArticle {
    font-size: 30px;
    cursor: pointer;
    margin-left: 5px;
}
.html2pdf__overlay {
    overflow: hidden;
    z-index: 1000;
    inset: 0px;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 1 !important;
}
#pagePaperdivouter {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
padding: 25px;
font-size:15px; 
margin-left: 20%; 
background: #fff; 
color:#000; 
width: 195mm; 
position: absolute;
}
img.ausgabeUSBStick {
    width: -webkit-fill-available;
    max-width: 100%;
    height: auto;
}
section#sectionright .outeroffArticle img.articleimages {
    max-width: 200px;
    margin-bottom: 20px;
}
section#sectionright .outeroffArticle h2 {
    font-size: calc(0.8rem * 1.2) !important;
    max-width: 200px;
    color: aqua !important;
}
section#sectionright {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
}
.outeroffArticleOuter img {
    max-width: 200px !important;
}
.outeroffTitle {
    font-size: 34px;
    font-weight: 900;
}
section#sectionright {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.outeroffArticle {
    border: aliceblue solid;
    margin: 10px;
    padding: 5px;
}
@media (max-width: 750px) {
img.ausgabeUSBStick {
    width: -webkit-fill-available;
    max-width: 750px;
    height: auto;
}
article ul#alllinks {
    width: 89%;
    max-width: 90%;
    display: block;
    flex-wrap: unset;
    justify-content: unset;
    flex-direction: unset;
    margin-left: unset;
}
article ul#alllinks li {
    max-width: 100%;
}
    div#weathermain {
    display: block;
    position: absolute;
    top: 0;
    right: 0%;
    transform: scale(0.7);
}
div#showsecuregiantsettings {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 30px;
    background-color: black;
    border-radius: 25px;
    cursor: pointer;
}
div#allsettingsdiv {
    display: flex;
    position: fixed;
    width: 100%;
    margin: 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
    top: 0%;
    left: 0%;
    background-color: #434343;
    padding: 0px;
}
[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: -35px;
    left: 55px;
}
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;
  }
}
div#ulheader {
    position: relative;
    width: 100%;
    text-align: center;
    margin-bottom: 25px;
    font-size: calc(clamp(1.6rem, 3.5vw, 2.2rem) * var(--article-scale)) !important;
}
span.active-transcript-text {
    border-bottom-color: #000000;
    border-bottom-style: solid;
    filter: hue-rotate(45deg);
    text-shadow: 0 0 5px #FFFFFF, 0 0 10px #FFFFFF, 0 0 20px #FFFFFF, 0 0 40px #0f0, 0 0 80px #0f0, 0 0 90px #0f0, 0 0 100px #0f0, 0 0 150px #0f0;
}
body.dark-mode span.active-transcript-text {
    border-bottom-color: greenyellow;
    border-bottom-style: solid;
    filter: hue-rotate(45deg);
    text-shadow: 0 0 5px #FFFFFF, 0 0 10px #FFFFFF, 0 0 20px #FFFFFF, 0 0 40px #0f0, 0 0 80px #0f0, 0 0 90px #0f0, 0 0 100px #0f0, 0 0 150px #0f0;
}
.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;
}
div#pintrueartikel li {
    color: #fe7420 !important;
}
input#keyword::placeholder {
    color: violet !important;
}
div#searchdiver li {
    color: #70ddff;
}
li.fly-in {
    color: yellow;
}
[id^=videoContainer] div.h2-preview {
    color: whitesmoke !important;
}
body.dark-mode div#plaeceholderdiv h2, body.dark-mode div#artikel article h2, body.dark-mode div#plaeceholderdiv h2 strong, body.dark-mode div#artikel article h2 strong {
    /*animation: neonGlow 2s 1s infinite alternate;*/
    color: #fff;
}
body.dark-mode div#inboxartikel li {
    border-color: #00ff41;
}
@keyframes neonGlow {
  0% {
    text-shadow: 0 0 10px rgba(255,255,255,.8),
                 0 0 20px rgba(255,255,255,.8),
                 0 0 22px  rgba(255,255,255,.8),
                 0 0 40px  rgba(66,220,219,.8),
                 0 0 60px  rgba(66,220,219,.8),
                 0 0 80px  rgba(66,220,219,.5),
                 0 0 100px rgba(66,220,219,.5),
                 0 0 140px rgba(66,220,219,.5),
                 0 0 200px rgba(66,220,219,.5);
  }
  100% {
    text-shadow: 0 0 2px rgba(255,255,255,.8),
                 0 0 8px rgba(255,255,255,.8),
                 0 0 10px rgba(255,255,255,.8),
                 0 0 20px rgba(66,220,219,.8),
                 0 0 30px rgba(66,220,219,.8),
                 0 0 40px rgba(66,220,219,.8),
                 0 0 50px rgba(66,220,219,.5),
                 0 0 80px rgba(66,220,219,.5);
  }
}