/* Banner-Styling */
        #status-banner {
            display: none;
            position: fixed;
            top: 20px;
            right: 20px;
            width: 320px;
            background: #ffffff;
            border-left: 5px solid #27ae60;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            padding: 20px;
            border-radius: 8px;
            z-index: 1000;
        }
        /* Fortschrittsbalken */
        .progress-container {
            width: 100%;
            background-color: #eee;
            height: 6px;
            margin-top: 12px;
            border-radius: 3px;
            overflow: hidden;
        }
        #progress-bar {
            width: 100%;
            height: 100%;
            background-color: #27ae60;
            transition: width 1s linear;
        }


.fixedhead {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  background-image: linear-gradient(to top, rgba(255,255,255,0.4), rgba(255,255,255,1));
}

.bild { display: block; max-width: 100%;}

body {
  color: #0b1f8f;
  background-color: linear-gradient(to top, rgba(255,255,255,0.4), rgba(255,255,255,1)) }

@page {size:A5;}

input[required] {
  border-color: red;
  width: 64px;
}

.quer {
  transform: rotate(270deg);
}

.hilf { width: 256px}
.hilfs { width: 768px}
.pics { height: 128px}
.pica { width: 320px}
.picb { width: 90%}

.containerQ {
  transform: rotate(90deg);
  display: flex;
  width: 50%;
   /* flex-direction: row; // Standardmäßig horizontal */
}

.container {
  display: flex;
 /* flex-direction: row; // Standardmäßig horizontal */
}

.column {
  flex: 1; /* Jede Spalte nimmt gleichen Platz ein */
  padding: 4px;
  /* border: 1px solid black; Optional: Für die Darstellung der Spalten */
}

.BESTCOIN { font-size:xxx-large;  color: darkblue; border-radius: 48px; background-color: hotpink; }
.BESTCOIN:hover { color: white; background-color: fuchsia; }
.BESTCOIN:focus { color: white; background-color: fuchsia; }
.BESTPRNT { font-size:x-large;  color: darkblue; border-radius: 8px; background-color: hotpink; }
.BESTPRNT:hover { color: white; background-color: fuchsia; }
.BESTPRNT:focus { color: white; background-color: fuchsia; }
.BESTcoin { font-size:x-large;  color: darkblue; border-radius: 8px; background-color: aqua; }
.BESTcoin:hover { color: white; background-color: blue; }
.BESTcoin:focus { color: white; background-color: blue; }
.BESTFREE { font-size:xxx-large;  color: darkblue; border-radius: 8px; background-color: blue; }
.BESTFREE:hover { color: white; background-color: aqua; }
.BESTFREE:focus { color: white; background-color: aqua; }
.BESTLOST { font-size:xxx-large;  color: darkblue; border-radius: 48px; background-color: gry; }
.BESTLOST:hover { color: white; background-color: black; }
.BESTLOST:focus { color: white; background-color: black; }


.BESTSUB { font-size:xx-large;  color: darkblue; border-radius: 12px; background-color: hotpink; }
.BESTSUB:hover { color: white; background-color: fuchsia; }
.BESTSUB:focus { color: white; background-color: fuchsia; }
.BESTFRE { font-size:x-large;  color: darkblue; border-radius: 12px; background-color: hotpink; }
.BESTFRE:hover { color: white; background-color: fuchsia; }
.BESTFRE:focus { color: white; background-color: fuchsia; }
.BESTSEL { font-size:xx-large; }
.BESTNUM { font-size:xx-large; width:64px; }
.SUBs { font-size:x-large }
.PRNs { font-size:x-large; color: darkblue; background-color: hsla(200, 100%, 80%, 0.3); }
.PRNs:hover { font-size:x-large; color: white; background-color: hsla(200, 100%, 80%, 1.0); }
.PRNs:focus { font-size:x-large; color: white; background-color: hsla(200, 100%, 80%, 1.0); }
.SELs { font-size:x-large }
.PUTs { font-size:x-large }
.GROS { font-size:large }

table { font-size:large; }

input[type='checkbox'] { transform: scale(2.6); }
input[type='text'] { transform: scale(1.2); }
.checks { transform: scale(1.2); }

.hidden { display: none; }

[class*="X"] { background-size:cover; width:96px; height:96px; background-repeat: no-repeat; border:0; background-color:transparent; box-shadow: 2px 1px 4px darkblue; border-radius: 2px; margin: 3px }
.XA { background-image: url('../ICONs/wahl.svg'); }



.txt_flex { display:flex; justify-content:center; padding:0px; }
.txt_flex512 { flex-shrink:1; width:100%; max-width:600px;}
.txt_flexgast { flex-shrink:1; width:40%; margin:3%;float:left; border-style: outset; }

.txt_flex768 { flex-shrink:1; width:100%; max-width:768px;}
.txt_flexbut { flex-shrink:1; width:25%; margin:0%;float:left;}
.txt_flex25 { flex-shrink:1; width:25%; margin:0%;float:left; }
.txt_flex50 { flex-shrink:1; width:48%; margin:1%;float:left; }
.txt_flex75 { flex-shrink:1; width:75%; margin:0%;float:left; }
.txt_flex16 { flex-shrink:1; width:16%; margin:0%;float:left; }
.txt_flex68 { flex-shrink:1; width:68%; margin:0%;float:left; }
.txt_flex84 { flex-shrink:1; width:84%; margin:0%;float:left; }

hr {
  width: 33%;
  color: #000080;
  box-shadow: 1px 2px 4px blue;
}

br.clear {
	clear: both;
	line-height: 0em;
	height: 0px;
}


h2 {
  color: #ffffff;
  background-color: #000080;
  padding: 4px;
  font-weight: 700;
  border-bottom: 1px solid silver;
  border-right: 2px solid silver;
  box-shadow: 4px 6px 8px blue;
  text-align: center;
  font-variant: small-caps;
}
h2:hover { color: #ffffff; }


summary {
  cursor: pointer;
  color: #ffffff;
  background-color: #000080;
  padding: 4px;
  font-weight: 700;
  font-size: large;
  border-bottom: 1px solid silver;
  border-right: 2px solid silver;
  box-shadow: 4px 6px 8px blue;
  text-align: center;
  font-variant: small-caps;
}
summary:hover {
	color: #000080;
    background-color: #ffffff;
}

.inputs {
	cursor: pointer;
	color: #ffffff;
	position: relative;
	margin-left:7px;
	margin-right:7px;
	top: 6px;
	background-color:#000080;
	color: #ffffff;
	font-weight: bold;  
	border: solid 2px darkblue;
	border-width: 0 3px 4px 0;
	border-radius: 3px;
	border-color: transparent #000080 #000080 transparent;
	background-clip: padding-box;
	}
.inputs:hover {
	color: blue;
    background-color: #ffffff;
}


.links { 
	text-decoration: none;
	opacity: 90%;
	font-size: small; }
.links a {
	text-decoration: none;
	margin-right:7px;
	margin-left:7px;
	background-color:#000080;
	color: #ffffff;
	height: 56px;
	line-height: 32px;
	padding: 0 12px;
	font-weight: bold;  
	border: solid 3px darkblue;
	border-width: 0 4px 5px 0;
	border-radius: 3px;
	border-color: transparent #000080 #000080 transparent;
	background-clip: padding-box; }
.links a:hover {
	background-color:#ffffff;
	color: blue;
	border-width: 0 2px 3px 0; 
	margin-right: 4px;
	position: relative;
	left: 2px;
	top: 3px;
	}

.linkx { 
	text-decoration: none;
	opacity: 90%;
	font-size: small; }
.linkx a {
	text-decoration: none;
	margin-right:7px;
	margin-left:7px;
	background-color:#000080;
	color: #ffffff;
	height: 56px;
	line-height: 32px;
	padding: 0 12px;
	font-weight: bold;  
	border: solid 1px darkblue;
	border-width: 0 1px 1px 0;
	border-radius: 3px;
	border-color: transparent #000080 #000080 transparent;
	background-clip: padding-box; }
.linkx a:hover {
	background-color:#00ffff;
	border-width: 0 1px 2px 0; 
	margin-right: 4px;
	position: relative;
	left: 2px;
	top: 3px;
	}



.siweco { float:left; margin-top:6px; width:128px; }
.siwecos { margin-top:4px;width:80px;height:32px; }

.copy { float:right; margin-top:4px; width:144px }
.copy a { text-decoration:none;color:#dbaa00; font-size:small }
.copies { width:48px;height:48px; }

.textarea { width: 50%; box-sizing: border-box; }

#BELEGSAUSDRUCK {
    background-color: hsla(200, 100%, 80%, 0.3); 
    padding: 10px; 
    margin: auto; 
    width: 96%;
    /* Falls du hier schon A6-Proportionen sehen willst: */
    max-width: 105mm; 
}

@media only screen and (max-width: 512px) {
.txt_flex512 { flex-shrink:1; width:100%; max-width:500px;}
.txt_flexgast { flex-shrink:1; width:40%; margin:1%;float:left; border-style: outset; font-size: small }

.pics { height: 80px }

[class*="X"] { background-size:cover; width:48px; height:48px; background-repeat: no-repeat; border:0; background-color:transparent; box-shadow: 2px 1px 4px darkblue; border-radius: 2px; margin: 3px }
.XA { background-image: url('../ICONs/wahl.svg'); }

/*
[class*="gastro"] { background-size:cover; width:96px; height:96px; background-repeat: no-repeat; border:0; background-color:transparent }
.gastros { background-image: url('../ICONs/serv.svg'); width:72px; height:96px}
.gastrof { background-image: url('../ICONs/serf.svg'); width:128px; height:96px}
.gastrokl { background-image: url('../ICONs/list.svg'); width:46px; height:96px}
.gastrokq { background-image: url('../ICONs/listq.svg'); width:46px; height:96px}
*/
table { font-size: small }

.BESTSUB { font-size:x-large }
.BESTSEL { font-size:x-large }
.BESTNUM { font-size:x-large; width:48px; }
.SUBs { font-size:large }
.SELs { font-size:x-large }
.PUTs { font-size:large }

.txt_flex768 { flex-shrink:1; width:100%; max-width:500px;}

.HOME { background-image: url('../ICONs/HLight.svg'); background-size:cover; width:96px; height:32px; background-repeat: no-repeat; border:0; background-color:transparent }
.WIRs { background-image: url('../ICONs/WIR.svg'); background-size:cover; width:160px; height:24px; background-repeat: no-repeat; border:0; background-color:transparent }
.wirs { background-image: url('../ICONs/WIRs.svg'); background-size:cover; width:96px; height:24px; background-repeat: no-repeat; border:0; background-color:transparent }
.news { background-image: url('../ICONs/START.svg'); background-size:cover; width:96px; height:24px; background-repeat: no-repeat; border:0; background-color:transparent; padding: 0;  color: #ffffff; font-weight: 700; font-size: x-large;}

.FUSS { background-image: url('../ICONs/FUSS.svg'); background-size:cover; width:272px; height:3px; background-repeat: no-repeat; border:0; background-color:transparent }
.START { background-image: url('../ICONs/START.svg'); background-size:cover; width:256px; }
.START:hover { background-image: url('../ICONs/STARTx.svg');cursor:pointer; width:336px; }
.START:focus { background-image: url('../ICONs/STARTx.svg');color:transparent; width:336px; }
.sv01 { background-image: url('../ICONs/NewsGlobe.gif'); background-size:cover; width:72px; height:72px; background-repeat: no-repeat; border:0; background-color:transparent }
.sv04 { background-image: url('../ICONs/HistsGlobe.gif'); background-size:cover; width:42px; height:42px; background-repeat: no-repeat; border:0; background-color:transparent }

.sv04y { background-image: url('../ICONs/FuturGlobe.gif'); background-size:cover; width:42px; height:42px; background-repeat: no-repeat; border:0; background-color:transparent }

.sv04z { background-image: url('../ICONs/BlicksGlobe.gif'); background-size:cover; width:72px; height:72px; background-repeat: no-repeat; border:0; background-color:transparent }


[class*="SV"] { background-size:cover; width:80px; height:100px; background-repeat: no-repeat; border:0; background-color:transparent }
.SV11 { background-image: url('../ICONs/sv11z.svg') }
.SV12 { background-image: url('../ICONs/sv12z.svg') }
.SV13 { background-image: url('../ICONs/sv13z.svg') }
.SV14 { background-image: url('../ICONs/sv14z.svg') }
.SV21 { background-image: url('../ICONs/sv21z.svg') }
.SV23 { background-image: url('../ICONs/sv23z.svg') }
.SV24 { background-image: url('../ICONs/sv24z.svg') }
.SV31 { background-image: url('../ICONs/sv31z.svg') }
.SV34 { background-image: url('../ICONs/sv34z.svg') }
.SV42 { background-image: url('../ICONs/sv42z.svg') }
.SV43 { background-image: url('../ICONs/sv43z.svg') }

.siwecos { margin-top:4px;width:64px;height:16px; }
.copies { width:48px;height:48px; }

}