/* ======================================================================================== */
/* === Layout must-have elements 														=== */
/* === AK 09-07-2026 																	=== */
/* ======================================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeInOnly {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes slideInDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes headerIn {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes mainIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}




body {
    font-family: var(--std-font-family);
    font-size: 	var(--std-font-size);
    line-height: var(--std-line-height);
    color: 		var(--text-primary);
    background-color: var(--mainblock-bg); 
    opacity: 	0; 
    animation: fadeInOnly 0.8s ease-out 0.2s forwards;
    will-change: opacity;
    margin: 	0;
	padding:	0;
}


main {
    display: block;  
    margin: 0;        
    padding-top: 0px; /* CSS-Trick */
}
.maincontainer { 
    width: 			100%;
    border-radius: 	var(--std-border-radius); 
    border: 		var(--box-thin-border) solid var(--box-std-border-col); 
    background-color: var(--mainblock-bg); 
    color: 			var(--text-primary);
    padding: 		20px; 
    padding-top: 	10px;	
}
.maincontainer.has-header {
    padding-top: 	130px; 
}

h1 {
    font-size: 	var(--h1-font-size);
    font-weight: var(--h1-weight);
    color: 		var(--h1-col);
	margin-top: 0;
    margin-bottom: 1.2rem;
}

h2 {
    font-size: var(--h2-font-size);
    font-weight: var(--h2-weight);
    color: var(--h2-col);
	margin-top: 2rem;	
    margin-bottom: 0.6rem;    
}
h3 {
    font-size: var(--h3-font-size);
    font-weight: var(--h3-weight);
    color: var(--h3-col);
	margin-top: 1.6rem;
    margin-bottom: 0.5rem; 
}
h4 {
    font-size: var(--h4-font-size);
    font-weight: var(--h4-weight);
    color: var(--h4-col);
	margin-top: 1.2rem;
    margin-bottom: 0.4rem;
}
h1:first-child, 
h2:first-child, 
h3:first-child, 
h4:first-child,
.ak-box-header:first-child {
    margin-top: 0;
}

/* Flexbox-Grid */
.row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 15px;
}
.col-25 { flex: 25%; min-width: 150px; }
.col-30 { flex: 30%; min-width: 150px; }
.col-75 { flex: 75%; min-width: 250px; }

@media (max-width: 600px) {
    .col-25, .col-75, .col-30 { flex: 100%; }
}
/* === Backup to top button === */
#AKTopBtn {
  position: fixed;
  bottom: 8px;
  right: 20px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: none; /* begin invisible */
  z-index: 9999;
}
#AKTopBtn img {
  width: 37px;   
  height: auto;
  opacity: 0.6;
  border-radius: 50%; /* circle */
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
  transition: transform 0.2s ease, opacity 0.2s ease; 
  display: block; 
}
#AKTopBtn:hover img {
  transform: scale(1.15); 
  opacity: 0.9;           
}