/* Main CSS File */
:root {
  --main_font_color: #1A304D;
  --main_design_color: #1A304D;
  --mainDesignColor1: #8b9e67;
  --mainDesignColor1a: #8b9e67;
  --mainDesignColor2: #8b9e67;
  --mainDesignColor2a: #8b9e67;
  --mainSchriftSize: 20px;
  --mainDetails: #565656;
  --rounded: 8px;
  --ia_default_padding: 20px;
  --ia_default_paddingField: 6px 10px;
  --iaDefaultBorderField: 1px;
  --iaDefaultFontSize: 17px;
  --ia_default_paddingButton: 5px 15px 5px 15px;
  --mainEffectDuration: 0.5s;
  --iaDefaultShadow: 0px 12px 6px -6px rgba(0,0,0,0.12);
}


/*    ####################################################     */

/* ia Standards */
.ia_inline { display:inline-block; }
.ia_p {	padding:0 0 10px 0; }
.ia_none { display:none; }
.ia_default_padding { padding: 20px; }
.ia_white {	color:white; }
.ia_underline { text-decoration:underline!important; }
.ia_strong { font-weight: bold; }
.ia_center { text-align: center; }
.ia_pointer { cursor:pointer; }

.ia_width_20 { width: 20%!important; }
.ia_width_30 { width: 30%!important; }
.ia_width_40 { width: 40%!important; }

.ia_overflow_hidden { overflow:hidden; }

.ia_space_xs { height: 0.1em; }
.ia_space_s { height: 0.5em; }
.ia_space_l { height: 1em; }
.ia_space_m { height: 1.5em; }
.ia_space_l { height: 2em; }
.ia_space_xl { height: 2.5em; }

.ia_rounded {
	border-radius: var(--rounded);
}
.ia_default_padding_field {
	padding: var(--ia_default_paddingField);
}
.ia_default_border_field {
	border-width: var(--iaDefaultBorderField);
}
.ia_button {
	background-color: var(--main_font_color);
	margin-left: 0em;
	border:none;
	padding: 0.3em 0.7em 0.3em 0.7em;
	font-size: 17px;
	border-radius: var(--rounded);
	color: white;
	
}
.ia_button_light {
	background-color:#fff;
	margin-left: 0em;
	border:none;
	padding: 0.3em 0.7em 0.3em 0.7em;
	font-size: 17px;
	border-radius: var(--rounded);
	color: var(--main_font_color);
	
}
.ia_button_2 {
	background-color: var(--main_font_color);
	margin-left: 0em;
	border:none;
	padding: 0.3em 0.7em 0.3em 0.7em;
	font-size: 17px;
	border-radius: var(--rounded);
	color: white;
	
}
.ia_button:hover {
	opacity: 0.7;
	cursor:pointer;
}
.ia_button_light:hover {
	opacity: 0.7;
	cursor:pointer;
}

.ia_button:active {
	background-color:#f6f6f6;
}

.ia_button_disabled {
	background-color: #dfdfdf!important;
}

.ia_button_margin {
	margin: 0.1em;
}

.ia_input {
	padding: 0.3em 0.7em 0.3em 0.7em!important;
	font-size: 17px!important;
	min-width: 30%;
	border-radius: var(--rounded);
	border-width: 1px!important;
	border-color: var(--main_design_color);
}

.ia_subnote {
	font-size:70%;
	opacity:0.4;
}

/* Responsive design for screens smaller than 980px */
@media (max-width: 980px) {
	.ia_input {
		width: 100%;
	}
}
.ia_dropdown {
	padding: 0.3em 0.7em 0.3em 0.7em!important;
	font-size: 17px!important;
	min-width: 30%;
	border-radius: var(--rounded);
	border-width: 1px!important;
	border-color: var(--main_design_color);
}
@media (max-width: 980px) {
	.ia_dropdown {
		width: 100%;
	}
}

.ia_grid_3 {
  display: grid;
  grid-template-columns: 1fr; /* Standard: 1 Spalte */
  gap: 1em;
}

@media (min-width: 767px) {
  .ia_grid_3 {
    grid-template-columns: 1fr 1fr; /* ab 600px: 2 Spalten */
  }
}

@media (min-width: 980px) {
  .ia_grid_3 {
    grid-template-columns: 1fr 1fr 1fr 1fr; /* ab 980px: 4 Spalten */
  }
}

.ia_grid_3_box {
  border-radius: var(--rounded);
  cursor: pointer;
  padding: 1em;
  text-align: left;
  min-height: 6em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}




.ia_fade_in {
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}

@keyframes fadein {
    from { opacity: 0; transform: rotateX(0deg) rotateY(15deg); transform: translate(0px, 2px);}
    to   { opacity: 1; transform: rotateX(0deg) rotateY(0deg); transform: translate(0px, 0px); }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; transform: rotateX(0deg) rotateY(15deg); }
    to   { opacity: 1; transform: rotateX(0deg) rotateY(0deg); }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; transform: rotateX(0deg) rotateY(15deg); }
    to   { opacity: 1; transform: rotateX(0deg) rotateY(0deg); }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; transform: rotateX(0deg) rotateY(15deg); }
    to   { opacity: 1; transform: rotateX(0deg) rotateY(0deg); }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; transform: rotateX(0deg) rotateY(15deg); }
    to   { opacity: 1; transform: rotateX(0deg) rotateY(0deg); }
}

.ia_scale:hover {
	transform: scale(1.1);
}
@media (max-width: 980px) {
	.ia_scale:hover {
		transform: scale(1);
	}
}


.ia_blink {
    animation: blink 2s linear infinite;
}

@keyframes blink {
    0%   { opacity: 0.5; }
    50%  { opacity: 1; }
    100% { opacity: 0.5; }
}

.ia_main_frame {
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		min-height:93vh;
		
}
.ia_content_frame {
	padding: 3em;
}

.ia_app_icon_tile {

}

.ia_app_icon_tile:hover {
	transform:scale(1.05);
}

.ia_app_box {
	width:100%;
	min-height: 30vh;
}


.ia_open_app {
  transform:scale(1.05);
  opacity: 1;
  animation: ia_open_app_fade 1s ease-in-out forwards;
}
@keyframes ia_open_app_fade {
  0% {
    transform:scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1.25);
    opacity: 0.5;
  }

}

.ia_glass_dark {
	position: relative;
	background: 
		url('https://webinspektor.de/wp-content/uploads/webinspektor-weiss-150px.webp') no-repeat right 2em bottom 1.3em,
		linear-gradient(to right, rgba(26, 48, 77, 1), rgba(26, 48, 77, 0.70));
	background-size: auto 5em, cover;
	box-shadow: 0px 9px 12px rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: var(--rounded);
	border: 0px solid rgba(255, 255, 255, 0.18);
	transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
	overflow: hidden;
	color: white;
}

.ia_glass_dark:hover {
	background: 
		url('https://webinspektor.de/wp-content/uploads/Logo_Animation_Farbe.gif') no-repeat right 2em bottom 1.3em,
		linear-gradient(to right, rgba(26, 48, 77, 1), rgba(26, 48, 77, 0.70));
	background-size: auto 6em, cover;
	box-shadow: 0px 9px 12px rgba(0, 0, 0, 0.3);
}
@media (max-width: 980px) {
	.ia_glass_dark {
		background: 
			url('https://webinspektor.de/wp-content/uploads/webinspektor-weiss-150px.webp') no-repeat right 1em bottom 1em,
			linear-gradient(to right, rgba(26, 48, 77, 1), rgba(26, 48, 77, 0.70));
		background-size: auto 2.7em, cover;
		box-shadow: 0px 9px 12px rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		border-radius: var(--rounded);
		border: 1px solid rgba(255, 255, 255, 0.18);
		transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
		overflow: hidden;
		color: white;
	}

	.ia_glass_dark:hover {
		background: 
			url('https://webinspektor.de/wp-content/uploads/Logo_Animation_Farbe.gif') no-repeat right 1em bottom 1em,
			linear-gradient(to right, rgba(26, 48, 77, 1), rgba(26, 48, 77, 0.70));
		background-size: auto 3.2em, cover;
		box-shadow: 0px 9px 12px rgba(0, 0, 0, 0.3);
	}
}


.ia_glass_light {
	background: rgba( 255, 255, 255, 0.55 );
	box-shadow: 0px 9px 12px rgba(0, 0, 0, 0.2);
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
	border-radius: var(--rounded);
	border: 0px solid rgba( 255, 255, 255, 0.18 );
	transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
	overflow:hidden;
}
.ia_glass_light:hover {
	background: rgba( 255, 255, 255, 0.65 );
	box-shadow: 0px 9px 12px rgba(0, 0, 0, 0.3);
	backdrop-filter: blur( 9px );
	-webkit-backdrop-filter: blur( 9px );
}

.bg_image_bottom_right {
    background-image: url('https://webinspektor.de/wp-content/uploads/Logo_Animation_Farbe.gif');
    background-repeat: no-repeat;
    background-position: right 2em bottom 2em;
    background-size: 15em;
    background-attachment: local;
    transition: none !important;
}





.ia_tr:hover {
	background-color: #efefef;
	/*
	background: linear-gradient(to right, #1A304D 0%, rgba(237, 237, 237, 0) 85%, rgba(237, 237, 237, 0) 100%); 
	color:white;
	*/
}

.ia_wrap {
	padding: 0 20px 0 20px;
}

.show_highest_page_counter {
	padding: 20px 30px 20px 30px;
	background-color: white;
	border-radius: var(--rounded);
	display: inline-block;
}


#binary-animation {
  overflow: hidden;
  font-family: monospace;
  color: rgba(255, 255, 255, 0.15);
  font-size: 12px;
}
.binary-column {
  position: absolute;
  top: -100%;
  white-space: nowrap;
  animation: drop 8s linear infinite;
}

@keyframes drop {
  0% {
    top: -100%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

.ia_responsive_table {
	
}

.ia_responsive_table {
  width: 100%;
  border-collapse: collapse;
}

.ia_responsive_table th,
.ia_responsive_table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

@media screen and (max-width: 768px) {
  .ia_responsive_table thead {
    display: none;
  }

  .ia_responsive_table tr {
    display: block;
    margin-bottom: 1em;
    border-bottom: 2px solid #ccc;
  }

  .ia_responsive_table td {
    display: block;
    text-align: right;
    position: relative;
    padding-left: 50%;
  }

  .ia_responsive_table td::before {
    content: attr(data-label);
    position: absolute;
    left: 8px;
    top: 8px;
    font-weight: bold;
    text-align: left;
  }
}

@media (max-width: 980px) {
  .ia_break_on_mobile {
    display: block;
  }
}

.ia_tile_white {
	background-color: #fff;
	border-width: 1px!important;
	border-color: #dfdfdf;
}
.ia_tile_white:hover {
	background-color: #f4f4f4;
}

/* GERMAN FLAG: dynamisch animierend */
.ia_german_flag_border {
  position: relative;
  overflow: hidden;
}

.ia_german_flag_border::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 5px;
  width: 100%;
  background: linear-gradient(to right,
    #1d1d1a 20%,
    #dc0000 50%,
    #f7c800 80%);
  background-size: 200% 100%;
  animation: flagFlow 6s infinite ease-in-out alternate;
}

/* Keyframes mit weichen, verschobenen Farbverläufen */
@keyframes flagFlow {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 0%;
  }
}


/* GERMAN FLAG TOP: dynamisch animierend */
.ia_german_flag_border_top {
  position: relative;
  overflow: hidden;
}

.ia_german_flag_border_top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 5px;
  width: 100%;
  background: linear-gradient(to right,
    #1d1d1a 20%,
    #dc0000 50%,
    #f7c800 80%);
  background-size: 200% 100%;
  animation: flagFlowTop 6s infinite ease-in-out alternate;
  z-index: 1;
}

@keyframes flagFlowTop {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 0%;
  }
}

/* / GERMAN FLAG: dynamisch animierend */

.wave_sweep {
  position: relative;
  overflow: hidden;
  background: transparent;
}

.wave_sweep::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 25%,
    rgba(0, 0, 0, 0.07) 50%,
    transparent 55%
  );
  animation: waveFlow 3s linear;
  animation-iteration-count: 20; /* 3s * 20 = 60s */
}
@keyframes waveFlow {
  0% {
    left: -100%;
  }
  100% {
    left: 0%;
  }
}