@charset "utf-8";
/* CSS Document */

 :root {
      --header-bg: #a1506e;
      --accent-line: rgba(255,255,255,0.7);
      --page-bg: #ffffff;
      --text: #000000;
      --yellow-strong: #ffd600;
    }

    html, body {
      height: 100%;
      margin: 0;
      background: var(--page-bg);
      overflow: hidden;
    }

    body {
      font-family: "Avenir Next", "Avenir", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      color: var(--text);
    }
	a, a:hover, a:visited, a:active {
	  color: white;
	  
	 text-decoration: none;
	}
.bold {
font-weight: bold;
}
.yellow {
	color: #fed100;
}
.blue {
	color: #84b0da;
}
.red {
	color: #a1506e;
}
    .wrapper {
      height: 100vh;
      display: grid;
      grid-template-rows: 25vh 1fr 16.666vh;
    }

    .header {
      position: relative;
      background: var(--header-bg);
      color: #fff;
      display: flex;
      align-items: flex-end;
      align-items: flex-end;
      justify-content: flex-start;
      text-align: left;
      padding: 0 4vw 5vh 4vw; /* Einheitlicher linker Abstand */
    }

    .header::before, .header::after {
      content: "";
      position: absolute;
      left: 4vw; right: 4vw; /* Linien gleicher Abstand wie Text */
      height: 2px;
      background: var(--accent-line);
    }

    .header::before { bottom: calc(7vh + 3.5em); } /* gleiche Distanz zur Überschrift wie unten */
    .header::after { bottom: 4vh; }

    .header h1 {
      margin: 0;
      font-weight: 600;
      font-size: clamp(22px, 4vw, 48px);
      letter-spacing: 0.5px;
    }

    .main {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4vw;
      padding: 2.5vh 4vw; /* gleicher linker Abstand */
      background: #fff;
    }

    .pane {
      border: 0px solid #e9e9e9;
      border-radius: 12px;
      overflow: hidden;
      display: grid;
      /*place-items: center;*/
      padding: 2vh 0vw;
      background: #fff;
      text-align: left;
    }

    .pane h2 {
      margin: 0 0 1vh 0;
      font-weight: 700;
      font-size: clamp(20px, 1.2vw, 20px);
    }

    .pane p, .pane li {
      margin: 0;
		text-align: justify;
      line-height: 1.85;
      font-size: clamp(18px, 1.4vw, 22px);
    }
	.alignleft p {
		text-align: left;
	}

    .pane img,
    .pane picture,
    .pane video {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain; /* Skaliert sinnvoll, ohne Beschnitt */
      display: block;
    }

.img-row {
display: flex;
gap: 1vw;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}


.img-row img {
max-width: 48%;
max-height: 100%;
object-fit: contain;
}
    .footerBand {
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 0 4vw; /* gleicher linker Abstand */
      text-align: left;
    }

    .footerBand p {
      margin: 0;
      color: var(--yellow-strong);
      font-weight: 700;
      font-size: clamp(14px, 2vw, 32px);
		width: 75%;
    }

    .fullBtn {
      position: fixed;
      right: 16px; bottom: 16px;
      padding: 10px 14px;
      border-radius: 10px;
      border: 1px solid #d8d8d8;
      background: #fff;
      font-size: 14px;
      cursor: pointer;
      user-select: none;
    }
/* Navigationskreise unten rechts */
    .nav-circles {
      position: absolute;
      right: 4vw;
      bottom: 2vh;
      display: flex;
      gap: 1.5vw;
    }

    .circle {
      width: 80px;
      height: 80px;
      background: var(--header-bg);
      border-radius: 50%;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "Avenir Next", sans-serif;
      font-weight: 600; /* Demi Bold */
      font-size: 1rem;
      cursor: pointer;
      user-select: none;
      transition: background 0.3s;
    }
	.bigfont {
		font-size: 2rem;
	}


    .circle:hover {
      background: #3e4d85;
    }

    .fullBtn {
      position: fixed;
      right: 16px; bottom: 16px;
      padding: 10px 14px;
      border-radius: 10px;
      border: 1px solid #d8d8d8;
      background: #fff;
      font-size: 14px;
      cursor: pointer;
      user-select: none;
    }

/* Kürzerer Main-Bereich */
.main.short {
  height: 28vh;
}

/* Linie unterhalb der Text-Spalten – gleiche Breite und Stil wie beim Header */
.separator {
  position: relative;
  height: 0vh; /* Platz für Linie + Abstand */
}
.separator::before {
  content: "";
  position: absolute;
  left: 4vw;
  right: 4vw;
  bottom: 2vh;
  height: 2px;
  background: rgba(255,255,255,0.7);
}

/* Mittelteil mit Kreisen */
.middle {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 20vh;
  background: #84b0da;
  padding-top: 2vh; /* weiter nach oben */
}

/* Container für 7 Kreise */
.mid-circles {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  gap: 1vw;
}

/* Große Kreise */
.mid-circles .circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Avenir Next", sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  cursor: pointer;
text-align:   center;
  transition: opacity 0.3s;
}

/* Farbschemata */
.re {
  background-color: #a1506e;
}
.dark {
  background-color: #314453;
}
.yellow {
  background-color: #fed100;
  color: #314453;
}
.yellowfont {
	color: #fed100;
}
.darkfont {
	color: #314453;
}
/* Hover-Effekt */
.mid-circles .circle:hover {
  opacity: 0.85;
}