@font-face {
  font-family: 'Bastardo Grotesk';
  src: url('assets/BastardoGrotesk-Semibold.woff2') format('woff2'),
    url('assets/BastardoGrotesk-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

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

:root {
  --font-big: clamp(1rem, 1.6vw, 2rem);
  --font-small: clamp(0.75rem, 0.8vw, 1rem);
  --max-width: 1600px;
  --violett: #5b4f93;
  --weiss: #ffffff;
  --schwarz: #000000;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Bastardo Grotesk', Arial, sans-serif;
  color: var(--weiss);
  position: relative;
  overflow: hidden;
}

h1 {
  font-weight: 600 !important;
}

body.jur {
  overflow-y: auto;
}

.top-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--violett);
  z-index: 1;
}

.bottom-section {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: url('assets/background.svg'), linear-gradient(to bottom, #8bc479 0%, #ffffff 100%);
  background-position: center, center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: multiply;
  z-index: 10;
}

body.jur {
  background: var(--violett);
  padding: 0;
  height: auto;
  min-height: 100%;
}

.jur-container {
  display: flex;
  flex-wrap: wrap;
  max-width: var(--max-width);
  gap: 32px;
  margin: 0 auto;
  padding: 16px;
}

.jur-left,
.jur-right {
  flex: 1;
  min-width: 0;
}

@media (max-width: 1200px) {
  .jur-container {
    flex-direction: column;
    gap: 1em;
  }

  .jur-left,
  .jur-right {
    flex: 1 1 100%;
  }
}

body.jur h1,
body.jur h2,
body.jur h3,
body.jur p,
body.jur a,
body.jur li {
  font-size: var(--font-small);
  color: var(--weiss);
  line-height: 1.3;
}

body.jur h1 {
  margin-bottom: 1em;
}

body.jur h2 {
  margin-top: 0;
}

body.jur p {
  margin-bottom: 1em;
}

body.jur p + h2 {
  margin-top: 1em;
}

body.jur p + ol {
  margin-top: 0;
}

body.jur ol {
  padding-left: 13px;
}

body.jur p:has(+ ol) {
  margin-bottom: 0;
}

body.jur a {
  text-decoration: none;
  display: inline-block;
  position: relative;
}

body.jur a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--weiss);
  transition: transform 0.2s ease;
  transform-origin: top;
}

body.jur a:hover::after,
body.jur a:focus-visible::after {
  transform: translateY(2px);
}

header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: flex-start;
  padding: 16px;
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 2;
}

@media (max-width: 850px) {
  header {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "l r"
      "c c";
  }

  .l {
    grid-area: l;
  }

  .c {
    grid-area: c;
    text-align: left;
    margin-top: 0;
  }

  .r {
    grid-area: r;
  }
}

.l {
  text-align: left;
}

.l h1 {
  font-size: var(--font-big);
  line-height: 1;
}

.l p {
  font-size: var(--font-big);
  line-height: 1;
}

.c {
  text-align: center;
}

@media (max-width: 850px) {
  .c {
    text-align: left !important;
  }
}

.c p {
  font-size: var(--font-big);
  line-height: 1;
}

.r {
  text-align: right;
}

.r a {
  font-size: var(--font-big);
  color: var(--weiss);
  text-decoration: none;
  line-height: 1;
}

.r a:hover,
.r a:focus-visible {
  text-decoration: underline;
}



footer {
  position: absolute;
  bottom: 16px;
  width: 100%;
  max-width: var(--max-width);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 11;
}

footer a {
  color: var(--violett);
  text-decoration: none;
  margin: 0 15px;
  font-size: var(--font-small);
  line-height: 1;
}

footer a:hover,
footer a:focus-visible {
  text-decoration: underline;
}

.at {
  display: block;
}

.ab {
  display: block;
}

.logo-animation {
  position: fixed;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

/* horizontale Linie in der Mitte – bleibt immer gleich */
.baseline {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(288px, 90vw);
  height: 8px;
  background: var(--weiss);
  transform: translate(-50%, -100%);
}

/* Container für alle rotierenden Strahlen */
.strahl-wrap {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  animation: wheelRotate 18s linear infinite;
}

/* einzelne Strahlen */
.strahl {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 144px;
  background: var(--weiss);
  transform-origin: 50% 100%;
}

/* 16 Strahlen gleichmäßig verteilt um 360° */
.strahl1 {
  transform: translate(-50%, -100%) rotate(0deg);
}

.strahl2 {
  transform: translate(-50%, -100%) rotate(22.5deg);
}

.strahl3 {
  transform: translate(-50%, -100%) rotate(45deg);
}

.strahl4 {
  transform: translate(-50%, -100%) rotate(67.5deg);
}

.strahl5 {
  transform: translate(-50%, -100%) rotate(90deg);
}

.strahl6 {
  transform: translate(-50%, -100%) rotate(112.5deg);
}

.strahl7 {
  transform: translate(-50%, -100%) rotate(135deg);
}

.strahl8 {
  transform: translate(-50%, -100%) rotate(157.5deg);
}

.strahl9 {
  transform: translate(-50%, -100%) rotate(180deg);
}

.strahl10 {
  transform: translate(-50%, -100%) rotate(202.5deg);
}

.strahl11 {
  transform: translate(-50%, -100%) rotate(225deg);
}

.strahl12 {
  transform: translate(-50%, -100%) rotate(247.5deg);
}

.strahl13 {
  transform: translate(-50%, -100%) rotate(270deg);
}

.strahl14 {
  transform: translate(-50%, -100%) rotate(292.5deg);
}

.strahl15 {
  transform: translate(-50%, -100%) rotate(315deg);
}

.strahl16 {
  transform: translate(-50%, -100%) rotate(337.5deg);
}

/* Rad-Animation: mit Pausen */
@keyframes wheelRotate {

  /* 3 Sekunden drehen (0% - 16.67%) */
  0% {
    transform: rotate(0deg);
  }

  16.67% {
    transform: rotate(-90deg);
  }

  /* 5 Sekunden Pause (16.67% - 44.44%) */
  44.44% {
    transform: rotate(-90deg);
  }

  /* 3 Sekunden drehen (44.44% - 61.11%) */
  61.11% {
    transform: rotate(-180deg);
  }

  /* 7 Sekunden Pause (61.11% - 100%) */
  100% {
    transform: rotate(-180deg);
  }
}