/* VARS */
:root {
    --gap: 12px;
    --link-color: red;
    --font-size: 11.5pt;
}

@media (max-width: 675px) {
    :root {
		    --gap: 13px;
    --link-color: red;
        --font-size: 13pt; /* Adjusted font size for mobile */
    }
    
}

/* SETUP */
* {
	    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
	font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: var(--font-size);
	line-height: 1.2;
	letter-spacing: 0.015rem;
	word-spacing: 0.02rem;
	font-variant-ligatures: common-ligatures;
	text-rendering: optimizeLegibility;
    color: black;
	background-color: white;
	-webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-feature-settings: "liga", "clig";
  	-webkit-font-feature-settings: "liga", "clig";
  	font-feature-settings: "liga", "clig";
}

main {
    padding-top: 12px; 
	padding-bottom: 20px;
	padding-left: 13px;
	padding-right: 10px;	
}

.toggle-label:hover::after {
    color: black;
}


.dot-adjust {
  vertical-align: top; /* or try: top, text-top, or custom tweaks below */
  position: relative;
  top: -1px; /* Fine-tune this value */
}

.dot-adjust-2 {
color: grey;
  vertical-align: top; /* or try: top, text-top, or custom tweaks below */
  position: relative;
  top: -1px; /* Fine-tune this value */
}


.dot {
  display: inline-block;
  border-radius: 50%;
  border: 1px solid #111;
  box-sizing: border-box;
  position: relative;
	  top: -0.1em; /* hebt den Punkt in die Mitte der Schrift */

}

.dot.filled {
  width: 7px;
  height: 7px;
  background: #111;

}

.dot.empty {
  width: 7px;
  height: 7px;
  background: transparent;

}

span1 {
	color: red;
}

span7 {
	color: red;
	letter-spacing: 0.03rem;
}


span5 {
	color: #6c6c6c;
}

span8 {
	color: red;
}

span10 {
	color: darkred;
}


span100 {
	color: darkred;
}

span101 {
	color: red;
}

span102 {
	color: red;
}



span6 {
	color: black;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2.1px;
}

span15 {
	letter-spacing: 0.03rem;

}


.span28 {
  font-size: 1.25em; /* or 1.5em — tweak as you like */
  line-height: 0.8;

font-weight: bold;

color: darkred;
vertical-align: top; /* or try: top, text-top, or custom tweaks below */
position: relative;
top: 0.1px; /* Fine-tune this value */
}


	
.span29 {
  font-size: 1.25em; /* or 1.5em — tweak as you like */
  line-height: 0.8;

font-weight: bold;

color: red;
vertical-align: top; /* or try: top, text-top, or custom tweaks below */
position: relative;
top: 0.1px; /* Fine-tune this value */
}

.span30 {
  font-size: 1.25em; /* or 1.5em — tweak as you like */
  line-height: 0.8;

font-weight: bold;

color: #6c6c6c;
vertical-align: top; /* or try: top, text-top, or custom tweaks below */
position: relative;
top: 0.1px; /* Fine-tune this value */
}


a.hover-grey:hover{
	color: grey !important;
}	

a.hover-orange:hover{
	color: grey!important;
}	

a.hover-darkred:hover{
	color: grey !important;
}	



span31 {
	color: #0000f5;
}

span32 {
font-weight: bold;
color: #009900;
}

span33 {
color: #009900;
}

span34 {
color: darkred;
}

span36 {
color: #323232;
}

span35 {
	letter-spacing: 0.07rem;
}

span39 {
	color: #323232;
}

span40 {
color: grey;
}

span26 {
	letter-spacing: 0.152rem;

}

span25 {
	letter-spacing: 0.1rem;

}


a {
    color: darkred;
}


a:link {
    color: red;
	background-color: none;
	text-decoration: none;}



a:visited {
  	text-decoration: none;
    color: red;
}



a:hover {
	color: darkred;
	text-decoration: none;
	background-color: none;
}

input {
	display: none;
}


.text, .text_mobile {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, height 0.2s ease;
}

/* When the checkbox is checked, show the content */
input:checked ~ .text, input:checked ~ .text_mobile {
    opacity: 1;
    height: auto;
}


.toggle-label {
    cursor: pointer;
	-webkit-tap-highlight-color: transparent; /* iOS Safari, Chrome */
    -webkit-touch-callout: none; /* Prevent context menu on long press */
}


.toggle-label::after {
    content: "Information ...";
    color: grey;
    cursor: pointer;
}

input:checked + .toggle-label::after {
    content: "Information (x)";
}


@keyframes blinkingText {
  0% {
    color: red;

  }
  49% {
    color: red;


  }
  60% {
    color: transparent;

  }
  99% {
    color: transparent;

  }
  100% {
    color: red;

  }
}



/* HEADER */
.header {
    display: flex;
}

.header__left {
    margin-right: var(--gap);
    flex-shrink: 0;
}


.block {
    display: flex;
}

.left {
    margin-right: var(--gap);
}

.block_mobile {
    display: none;
}

.accordian_mobile {
    display: none;
}

.text_mobile {
    display: none;
}