.logos{
    display: flex;
    justify-content: space-between;
}
.logos.bottom{
	margin-top:30px;
}
.logos img {
  max-height:100px;
}

@media screen and (min-width: 1400px) {  
	.logos.klein{
		display:none;
	}
	.logos.bottom img {
	  max-height:150px;
	}		
}
@media screen and (max-width: 1400px) {  
	.logos.gross{
		display:none;
	}
	.logos.bottom img {
	  max-height:100px;
	}	
}
  
input[type="checkbox"]:checked {
    background-color: white;
	width: 10px;
    height: 10px;
	border: 1px solid white;
	margin-top: 4px;
    margin-left: 5px;
}
input[type="checkbox"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 0px solid white;
	border-radius:5px;
    background-color: transparent;
    cursor: pointer;
    position: relative;
}
 #loading{
	display:none !important;
 }
  
    * {
      box-sizing: border-box;
    }

.logos img {
		margin-right:50px;
		margin-left:-20px;
	}
h2{
/*	font-size:40px;*/
	font-weight:700;
}	
.accordion-body{
	padding:0px;
}
.hidden{
	display:none;
}
    .page {
      max-width: 1100px;
      margin: 0 auto 40px;
      background: #ffffff;
    }

    /* Header */

    .top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 30px 0;
      font-size: 13px;
    }

    .logo-block {
      display: flex;
      align-items: center;
      gap: 4px;
      font-weight: 600;
    }

    .logo-square {
      width: 14px;
      height: 14px;
      display: inline-block;
    }

    .logo-square.green {
      background: #67b63b;
    }

    .logo-square.yellow {
      background: #ffe739;
    }

    .logo-text {
      margin-left: 8px;
    }

    .tagline {
      font-style: italic;
    }

    h1 {
      font-size: 22px;
      font-weight: 600;
      margin: 10px 30px 10px;
      text-transform: uppercase;
    }

    /* Map */

    .map-wrapper {
      padding: 0 30px 20px;
    }

    .map {
      position: relative;
      height: 420px;
      background: url("klimakarte.png") center / cover no-repeat;
      border: 1px solid #d0d0d0;
      overflow: hidden;
    }

    .map-control {
      position: absolute;
      left: 10px;
      width: 26px;
      height: 26px;
      background: #ffffff;
      border: 1px solid #aaa;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      cursor: pointer;
      user-select: none;
    }

    .map-control-plus {
      top: 10px;
    }

    .map-control-minus {
      top: 38px;
      border-top: none;
    }

    .station-popup {
      position: absolute;
      top: 40px;
      left: 45%;
      transform: translateX(-50%);
      background: #ffffff;
      padding: 8px 10px;
      font-size: 12px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
      min-width: 140px;
    }

    .station-popup strong {
      display: block;
      margin-bottom: 4px;
    }

    .circle {
      position: absolute;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      border-width: 6px;
      border-style: solid;
    }

    .circle.blue {
      border-color: #0072c6;
    }

    .circle.red {
      border-color: #d3312a;
    }

    .circle.orange {
      border-color: #f59c2f;
    }

    .circle.green {
      border-color: #4aa346;
    }

    /* approximate positions of circles */
    .c1 {
      top: 52%;
      left: 23%;
    }

    .c2 {
      top: 18%;
      right: 20%;
    }

    .c3 {
      top: 20%;
      right: 37%;
    }

    .c4 {
      top: 23%;
      right: 7%;
    }

    .c5 {
      top: 40%;
      right: 32%;
    }

    .c6 {
      top: 43%;
      right: 20%;
    }

    /* Blue panel */

    .panel {
      background: #3073a7;
      color: #ffffff;
      padding: 10px 60px 30px;
      font-size: 13px;
    }

    .panel-header {
      display: flex;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.6);
      padding: 6px 0 12px;
      text-transform: uppercase;
      font-size: 11px;
      letter-spacing: 0.04em;
    }

    .panel-header-symbol {
      font-size: 18px;
      font-weight: 600;
    }

    .panel-subtitle {
      font-size: 10px;
      margin-left: auto;
      opacity: 0.8;
    }

    .legend-list {
      margin: 10px 0 0;
      padding: 0;
      list-style: none;
    }

    .legend-row {
      display: flex;
      align-items: center;
      padding: 7px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    }

    .checkbox-box {
      width: 22px;
      height: 22px;
      border: 1px solid #ffffff;
      margin-right: 18px;
    }

    .legend-icon {
      width: 26px;
      text-align: center;
      margin-right: 16px;
      font-size: 16px;
    }

    .legend-label {
      flex: 1;
	  font-family:"Open Sans semibold";
	  font-size:20px;
    }

    /* Accordion sections */

    .accordion {
      margin-top: 8px;
      border-top: 1px solid #ffffff;
    }

    .accordion summary {
      list-style: none;
      cursor: pointer;
      padding: 8px 0;
      display: flex;
      align-items: center;
      font-weight: 500;
    }

    .accordion summary::-webkit-details-marker {
      display: none;
    }

    .accordion-symbol {
      display: inline-block;
      width: 18px;
      height: 18px;
      border: 1px solid #ffffff;
      margin-right: 12px;
      text-align: center;
      line-height: 16px;
      font-size: 16px;
      font-weight: 600;
    }

    .accordion-content {
      padding: 0 0 10px 30px;
      font-size: 12px;
      opacity: 0.9;
    }