/* Responsive and performance-optimized CSS */
body { 
font-family: Arial, sans-serif; 
line-height: 1.6; 
margin: 0; 
padding: 0;
color: #333;
}
.container { 
max-width: 1200px; 
margin: 0 auto; 
padding: 20px;
}
h1, h2, h3 { 
color: #2c5aa0; 
margin-top: 30px;
}
h1 {
font-size: 2.5em;
text-align: center;
margin-bottom: 10px;
}
.subtitle {
text-align: center;
font-size: 1.3em;
color: #666;
margin-bottom: 40px;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 30px 0;
}
.feature-item {
background: #f9f9f9;
padding: 20px;
border-radius: 8px;
border: 1px solid #ddd;
}
.cta-button {
background-color: #2c5aa0;
color: white;
padding: 15px 30px;
text-decoration: none;
border-radius: 5px;
display: inline-block;
margin: 20px 0;
font-size: 1.1em;
}
.cta-button:hover {
background-color: #1e3d6f;
}
@media (max-width: 768px) {
h1 { font-size: 2em; }
.container { padding: 10px; }
.feature-grid { grid-template-columns: 1fr; }
}

.flag {width:24px;height:16px;}
.section {
clear:both;padding:20px;
min-height:500px;
}

.headersection {
color:#ffffff;background-color:rgba(32,170,226,1);border;3px solid #white; border-radius: 6px; text-transform: uppercase; font-size: 1.3em; font-weight: bold; margin-top: 10px; clear: both; !margin-bottom: 10px; display: block; height: auto; padding: 10px; 
}
	

.headersep{
color:#ffffff;background-color:rgba(32,170,226,1);border;3px solid #white;border-radius:3px;;display:block;height:3px;width:90%;margin-left:auto;margin-right:auto;margin-top:20px;margin-bottom:20px;
}


.arrowup
{

}

.headersection:after {
content:"\00BB";
float:right;
transform:rotate(-90deg);
margin-right:10px;
cursor:pointer;
}



.blue1{
background-color:rgba(32,170,226,1);
}
.blue2{
background-color:rgba(196,224,245,1);
}


.u2 {
font-size:1.2em;
font-weight:bold;
color:rgba(32,170,226,1);;
}

.greenlabel {
font-size: small;
background-color: green;
color: white;
padding: 5px;
margin-top: 5px;
position: absolute;
border-radius: 6px;

}


.box1
{
background-color:#ffffff;
min-height:fit-content;
border:3px solid rgba(196,224,245,1);
padding:5px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}

.ht{
font-size:1.5em;
font-weight:bold;
color:rgba(32,170,226,1)
}

.ssgallery {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}


.ss, .ss2{
background-color:#FDFFF7;
!width:420px;
height:160px ;
border:1px solid #c0c0c0;
display:inline-block;
//float:left;


}

.ss2{
margin-top:10px;
margin-bottom:20px;
margin-right:20px;
position:relative;
}

.ssbox{
background-color:#FDFFF7;
height:220px;
border:1px solid rgba(196,224,245,1);
!float:left;
margin:10px;
display:block;

}

<!-- @media screen and (width >= 1000px) { -->
<!-- .ss, .ssbox{ -->
<!-- width:400px; -->
<!-- } -->
<!-- .ss, .ssbox { -->
<!-- height:150px; -->
<!-- } -->

<!-- } -->

.cont1 {
margin-top:20px;
}

.ss_h,.ss_t{
position:relative;
!width:fit-content;
font-size:medium;
display:block;
font-weight:bold;
text-align:center;
top:0px;
background-color:rgba(196,224,245,1);
margin-bottom:10px;
}

.ss_t {
font-size:small;
bottom:-5px;
background-color:e0e0e0;;
top:unset;

}

div.ssbox:hover {
border: 1px solid rgba(32,170,226,1);

}

.dlbox {
cursor: pointer; /* Indicates that the image is clickable */

}

.dlbox:hover {
transform: scale(1.1); /* Example: 50% enlargement */

}


.boxbtn
{
position: absolute;
bottom: 5px;
right: 5px;
}


.ss {
transition: transform 0.3s ease-in-out; /* Smooth transition */
cursor: pointer; /* Indicates that the image is clickable */
}

.screenshot {
	width:100%;
	
}

.ss.zoomed {
transform: scale(3.5); /* Example: 50% magnification */
z-index: 100; /* Ensures that the enlarged image is on top of others */
position: relative; /* For z-index */
}

.css-button-arrow--sky {
min-width: 130px;
height: 20px;
//color: #fff;
margin-top:10px;
padding: 5px 10px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
! position: relative;
display: inline-block;
outline: none;
overflow: hidden;
border-radius: 5px;
//border: 2px solid rgba(32,170,226,1);
border: 2px solid #c0c0c0;
background-color: #e0e0e0;
// rgba(196,224,245,1);
}
.css-button-arrow--sky:hover {
border-radius: 5px;
padding-right: 24px;
padding-left:8px;
}
.css-button-arrow--sky:hover:after {
opacity: 1;
right: 10px;
}
.css-button-arrow--sky:after {
content: "\00BB";
position: absolute;
opacity: 0;
font-size: 20px;
line-height: 20px;
top: 0;
right: -20px;
transition: 0.4s;
class: upbtn;
}
.introimg {
float:left;
width:140px;
margin-left:5px;
margin-right:15px;
}

.formfield
{
border:1px solid rgba(32,170,226,1);
height:25px;
margin-bottom:10px;
!margin-left:10px;
!margin-right:10px;

}

label {display: inline-block; padding: 1px; }
.flex label { cursor: pointer }

.highlight-box {
background-color: #f0f8ff;
border-left: 4px solid #2c5aa0;
padding: 20px;
margin: 0;
}


@media (max-width: 768px){
  .desktop { display: none !important; }
}
@media (min-width: 768px){
  .mobile { display: none !important; }
}

@media (max-width: 768px) {
  .cta-wrap {
    display: inline-block;
    width: 100%;
    text-align: center;
    margin: 10px 0;
	top:100px;
	!position:absolute;
  }
  .cta-wrap .cta-button { 
    display: inline-block; 
    !width: calc(100% - 20px); 
    max-width: 480px; 
    margin: 8px auto; 
  }
}


@media (max-width: 768px) {
  .blue12 {
	 ! background-color:yellow;
    position: absolute !important;            /* aus dem absoluten Kontext lösen */
    top: 80px !important;
    width: 100% !important;
    !height: auto !important;                 /* nicht auf calc(100% - 105px) festnageln */
    max-height: none !important;            /* gesamte Seite darf scrollen */
    overflow-y: visible !important;         /* Browser-Scroll statt Bereichs-Scroll */
    overflow-x: hidden !important;
    margin-top: 10px !important;            /* Abstand unter dem Header */
  }
}