* { margin:0; padding:0; border:0; font-family: "Helvetica", Helvetica, Arial; line-height:1.4em; }
a { color: #444; text-decoration: none; outline: none; }
a:hover { text-decoration:underline; }
html { height:100%; }
body { 
    color: #444; 
    /* NEU: Semi-transparente weiße Ebene (rgba(255, 255, 255, 0.5)) über dem Bild */
    background: 
        linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), 
        url("../grafik/germany.png") no-repeat center fixed; /* fixed stellt sicher, dass es beim Scrollen bleibt */
    background-size: cover; 
    height:100%; 
}	
h1 { animation-name: letterspacinganim, moveanim; animation-duration: .33s; }
h1, h2, h3, h4 { font-size:1.3em; margin:.5em 0 1.2em 0; text-shadow: 1px 1px #cecece; letter-spacing: -1px; } 
p { margin-bottom: .4em; }
ul { margin-left:1em; }
li { margin-bottom:.3em; }
hr { border-top:1px dashed #444;margin:0.4em 0; }
table { border-spacing: 0px; border-collapse: separate; width:100%; }
tr:nth-child(even) {background-color: #f2f2f2;background-color: #f2f2f2;}
td, th { text-align:left; vertical-align:middle; } /*  white-space: nowrap; overflow: auto; */
th { background-color:rgb(136, 34, 34); color:#fff; padding: 2px 0; }
i { width: 1.2em; text-align:center;}
.gabSpacyIcons td i { width: 23px; }
/* .fas { width: 1.2em; } */
.gabMargin { margin: 0.8em 1em; }
.gabText { line-height:1.5em; }
.gabPageWrap { margin: 0 auto; max-width:1100px; overflow:hidden; }
.gabHead { 
	color:#fff;
	width:calc(100% - 2.69em);
	height:40px;
	padding: 1em 1.35em; 
	background-color:#882222; /* fallback */
	background: -moz-linear-gradient(top, #A88D5A 0%, #882222 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #A88D5A 0%, #882222 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, top, #A88D5A 0%, #882222 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A88D5A', endColorstr='#882222',GradientType=0 ); /* IE6-9 */
}
.gabNav { color:#fff; float:left; padding: 0.8em 1em; width:calc(220px - 2em); background-color:#882222; background-color:#882222; }
.gabMobileNav { color:#fff; display:none; padding: 0.8em 1em; background-color:#fff; position:fixed; top:0; left:0; width:220px; height:100%; z-index:9900; background-color:#882222; background-color:#882222; line-height: 1.8; }
.gabMobileNavClose { width:22px;float:right;font-size:1.8em; }
.gabInput { width:calc(100% - 8px); height: 24px; margin:.5em 0; padding-left: 6px; border:1px solid #464; border-radius: 4px; }
.gabNavNote { margin:.3em 0;font-size:0.8em;line-height:1.2em;color:#fff;color:#fffa; }
.gabNote { margin:.3em 0;font-size:0.8em;line-height:1.2em; }
.gabNoteBox { margin:1em auto; font-size:0.8em; line-height:1.2em;color:#888;max-width:400px;min-height: 40px;border:1px solid #ddd; background-color:#fff; padding: .4em .6em; overflow: auto; }
.gabColorTextBox { font-size:80%;width:80%;margin: 2em auto .5em auto;color: #444;background-color: #6c6;padding: .4em .5em; border: 1px solid #fff;}
.gabMessageBox { font-size:90%;padding:.4em .6em; border:1px solid #4a4; border-radius:8px; margin-bottom:1em; background-color:#dfd; overflow: auto; }
.gabButton { color:#fff; padding:0.4em .8em; margin-top:.5em; background-color:#4a4; border: 2px solid #376e37; border-radius: 4px; font-size:1em; cursor:pointer; border-top: 0; border-left: 0; }
.gabMobileNavBtn { display:none; float:left; height:35px; width:30px; margin: 0.3em 1.4em 0 0; font-size: .67em; text-align:center; }
.gabNavLink { color:#fff; } /* warning: also used in javascript */
.gabContent { float:left; width:calc(100% - 2em - 220px); padding: 0.8em 1em; background-color:#fff; background-color:#fffc; animation-name: opac; animation-duration: .5s; }
.gabContent a { color:#36b; text-decoration:none; }
.gabContent a:hover { color:#59d; text-decoration:underline; }
.gabBurgerBar { background-color:#fff;width:26px;height:4px;margin: 0 auto 3px auto; }
.gabBlackShine { box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.33); }
.gabHalfBox { width:calc(50% - 1.2em); float:left; min-width:300px; margin: 0 1.2em 0.8em 0; }
.gabOverlayPlayerLR { z-index:-1; position: fixed; top: 150px; left: -100px; animation-name: animLtoR; animation-duration: 100s; animation-iteration-count: infinite; animation-timing-function: linear; }
.gabOverlayPlayerRL { z-index:-1; position: fixed; top: 250px; left: -100px; animation-name: animRtoL; animation-duration: 100s; animation-iteration-count: infinite; animation-timing-function: linear; }
.gabHeadLeftBox { float:left; width:50%; }
.gabHeadRightBox { float:left; width:50%; text-align:right; }
.gabPlayerLeft{ float:left;height:64px;width:64px;margin: 0 .4em 0 0; }
.gabImgLeft{ float:left; margin: 0 1em 0 0; }
.gabFooterLine { clear:both;padding-top:2em;text-align:center;font-size:0.8em;color:#666; }
.gabScreenshot { width:140px;height:90px;float:left;background-color:#666;margin:0 .8em .8em 0; }
.gabFlagLeft { margin:3px 6px 0 0; float:left; }
.gabBigTable { font-size:0.86em; }
.gabBigTable tr{ height:26px; }
.gabBigTable td{ padding-left:4px; }
.gabPageButton { border-radius:6px; border: 1px solid #ddd; padding: 2px 4px; background-color: #eeea; line-height: 1.7em; }

.gabJsLink { cursor: pointer; color:#36b; text-decoration:none; }
.gabJsLink:hover { color:#59d; text-decoration:underline; }
.gabClickable { cursor: pointer; }
.gabSpoiler { display:none; }
.gabH1dden { display:none; }

.gabTextBoxHead { background-color:#258; color:#fff; padding:8px; width:calc(100% - 16px); overflow: auto; }
.gabTextBoxEmptyHead { background-color:#258a; height:2px; width:100%; }
.gabTextBoxContent { background-color:#eee;background-color:#eeea; padding:16px; width:calc(100% - 32px); font-size:.8em; line-height: 1.5em; }
.gabTextBoxFoot { background-color:#ddd;background-color:#ddda; padding:6px 8px; width:calc(100% - 16px); font-size:.8em; color:#888; overflow: auto; }
textarea { border:1px solid #ddd;margin-top:1em;width:calc(100% - 18px);height:120px;padding:8px;font-size: .9em; }

/*.gabVarTableA td:nth-of-type(n+8),th:nth-of-type(n+8) { display:none; }
.gabVarTableB td:nth-of-type(3),th:nth-of-type(n+8) { display:none; }*/

/*@media( max-width:350px )
{ 
	* { font-size:smaller; }
}*/
@media( max-width:750px )
{ 
    .gabNav{ display:none; }
    /* NEU: Flexbox für die horizontale Anordnung */
    .gabHeadLeftBox { 
        width:100%; 
        display: flex; /* WICHTIG */
        align-items: center; /* Vertikal zentrieren */
        float: none; /* Float des Containers in der mobilen Ansicht entfernen */
    }
    .gabHeadRightBox { display:none; }
    .gabMobileNavBtn { 
        /* float:left; wurde entfernt, da Flexbox das übernimmt */
        display:block; 
        margin: 0.3em 1.4em 0 0; /* Alte Margins beibehalten */
    }
    .gabContent { float:left; width:calc(100% - 2em); }
}
@media( max-width:1000px )
{ 
    .gabHalfBox { width:100%; }
}

@keyframes letterspacinganim
{
  from { letter-spacing:2px; }
  to { letter-spacing:0; }
}
@keyframes moveanim
{
  from { margin-left:1em; }
  to { margin-left:0; }
}
@keyframes opac
{
  from { opacity: 0.4; }
  to { opacity: 1; }
}
@keyframes animLtoR
{
  from { left:-10%;}
  to { left:100%; }
}
@keyframes animRtoL
{
  from { left:100%;}
  to { left:-10%; }
}