/* ==============================
   Fonts
============================== */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-v47-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/roboto-v47-latin-700.woff2') format('woff2');
}

/* ==============================
   Base Styles
============================== */
body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-optical-sizing: auto;
  background: #FFF;
  color: #FFF;
  max-width: 600px
}

a {
  text-decoration: none;
}

img {
  height: fit-content;
}

.visually-hidden {
  display: none;
  visibility: hidden;
}

/* ==============================
   Loading Overlay
============================== */
#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #FFF;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

#loading-overlay.fade-out {
  opacity: 0;
}

/* ==============================
   Typography
============================== */
h1, h2, h3, h4 {
  font-weight: 700;
  width: 100%;
}

h1 {
  font-size: 1.625rem;
}

h2 {
  font-size: 1.375rem;
  padding-top: 20px;
  flex-grow: 2;
}

h3 {
  font-size: 1rem;
}

h4 {
  font-size: 22px;
  margin: 0;
  line-height: 120%;
  text-align: left;
}

span.live,
span.location,
span.termin {
  display: block;
  font-size: 16px;
  font-weight: 400;
}

span.live {
  opacity: 0.8;
}

span.punkte {
  display: block;
  font-size: 22px;
  font-weight: 700;
  line-height: 38px;
  text-align: center;
  height: 38px;
  min-width: 38px;
  padding: 1px 2px 0 0;
  border-radius: 19px;
  background: #404040;
  box-sizing: border-box;
}

/* ==============================
   Layout Components
============================== */
header.landing {
  padding: 20px;
  position: sticky;
  top: 0;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #7AB51D, #005EA8);
  color: #FFF;
}

header > h1 {
  width: 80%;
}

header > p {
  margin-top: -0.5rem;
  font-weight: 700;
  opacity: 0.8;
}

main {
  position: relative;
  z-index: 10;
  padding-bottom: 80px;
  border-radius: 12px;
  background: #FFF;
  color: #404040;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  padding: 10px 20px 20px;
  background: #FFF;
  box-sizing: border-box;
}

/* ==============================
   Buttons
============================== */
.button {
  display: block;
  text-align: center;
  font-size: 1rem;
}

article .button {
  background: #ebebeb;
  color: #404040;
  line-height: 43px;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  padding: 1px 12px;
}

article .button.active {
  background: #225ca8;
  color: #FFF;
}

footer > .button {
  padding: 0 1px;
  border: none;
  border-radius: 10px;
  background: #FFF;
}

footer > .button.active {
  background: #005CAA;
}

footer > .button.active img {
  filter: brightness(0) invert(1);
}

.sponsoren {
  display: flex;
}

.button.panel.sponsor {
  margin-right: 6px;
  background: #EBEBEB;
  padding: 10px;
  width: fit-content;
  height: 80px;
}

/* ==============================
   Panels
============================== */
article > .panel {
  width: 100%;
  min-height: 111px;
  flex-basis: 100%;
  position: relative;
  border-radius: 12px;
  background: linear-gradient(90deg, #7AB51D, #005EA8);
  color: #FFF;
}

.panel.halb {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: calc(50% - 29px);
  min-height: 88px;
  gap: 10px;
}

.panel > .flexbox {
  display: flex;
  margin: 20px 0;
  gap: 10px;
}

.panel > .date,
article > .panel > .date {
  position: absolute;
  font-weight: 700;
  opacity: 0.5;
}

.panel > .date {
  bottom: -24px;
  right: -11px;
  font-size: 80px;
}

article > .panel > .date {
  bottom: -3px;
  right: -6px;
  font-size: 60px;
}

.panel > h3 {
  font-size: 24px;
  line-height: 120%;
  margin: 40px 20px 0;
}

a.button.panel.halb h4 {
  display: inline;
  line-height: 111%;
}

/* ==============================
   Swiper Styles
============================== */
.swiper-wrapper {
  margin-left: -7.5px;
}

.swiper-slide {
  width: calc(100% - 55px);
  height: 233px;
  border-radius: 12px;
  background: url("../img/bg.png") center/cover no-repeat;
  color: #FFF;
}

.swiper-pagination-bullet {
  background: #C5C5C5;
}

.swiper-pagination-bullet-active {
  background: #404040;
}

.filter .button.swiper-slide.swiper-slide-active {
  border-bottom: 2px solid #404040;
}

.filter .swiper-wrapper {
  margin-left: calc(60px - 50%);
}

.monate .swiper-wrapper {
  margin-left: 0;
}

.monate .swiper-slide {
  height: auto;
  border-radius: 0;
  background: none;
  color: #404040;
  text-align: center;
  font-size: 1.375rem;
}

/* ==============================
   Filters
============================== */
.filter .button {
  width: auto;
  min-width: 75px;
  height: 68px;
  font-size: 1rem;
  text-align: center;
  color: #404040;
  background: none;
  border: none;
  border-radius: 0;
}

.filter .button img {
  display: block;
  margin: 0 auto 10px;
}

.swiper.monate {
  margin-top: 30px;
}

/* ==============================
   Utility & Content Layout
============================== */
article {
  margin: 20px;
}

article.flexbox,
article.events {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

article.events {
  gap: 12px;
}

article.flexbox.termine .button:not(.highlight) {
  background: #EBEBEB;
  color: #404040;
}

article.flexbox.termine .button:not(.highlight) .punkte {
  background: linear-gradient(90deg, #7AB51D, #005EA8);
  color: #FFF;
}

article.flexbox.termine .button:not(.highlight) .location {
  color: #848484;
}

.termin b {
  margin-right: 7px;
}

/* ==============================
   Links
============================== */
.links {
  margin-bottom: 10px;
  padding-left: 0;
  list-style: none;
  font-size: 22px;
  font-weight: 700;
  line-height: 120%;
}

.links li {
  position: relative;
  margin-top: 20px;
  padding-right: 30px;
}

.links li a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 25px;
  height: 25px;
  transform: translateY(-50%);
  background: url('../img/link.svg') no-repeat;
}

.links a {
  color: #404040;
}

a.link {
  text-decoration: underline 2px;
  font-weight: 700;
  color: #005CAA;
  line-height: 120%;
  text-underline-offset: 0.3rem;
}

.eventNav a.link {
  position: absolute;
  right: 20px;
}

/* ==============================
   Event Styles
============================== */
.eventH {
  display: flex;
}

.eventH h1 {
  margin-top: 2rem;
  margin-right: 2rem;
}

.eventH .punkte {
  margin-top: 2rem;
  background: linear-gradient(90deg, #7AB51D, #005EA8);
  color: #fff;
  width: auto;
}

.eventNav {
  margin-top: 2rem;
}

/* ==============================
   Speaker Styles
============================== */
.speaker {
  margin-left: calc(-13px - 50%);
}

.speaker .swiper-slide {
  width: auto;
  height: auto;
  margin: 0 10px;
  background: none;
  color: #404040;
  font-weight: 700;
  border-radius: 0;
}

.speaker .swiper-slide div {
  width: 100px;
  height: 100px;
  margin: 10px auto;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
}

/* ==============================
   Timeline
============================== */
.timeline-item {
  position: relative;
  margin-left: 9px;
  padding: 0 0 20px 15px;
  border-left: 2px solid #404040;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 0;
  width: 14px;
  height: 14px;
  background: #fff;
  border: 2px solid #404040;
  border-radius: 50%;
}

.timeline-item:last-child {
  border-color: #FFF;
}

.time {
  font-size: 0.75rem;
  margin-bottom: 3px;
}

.title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 3px;
}

.speakerSub {
  font-size: 0.875rem;
}

/* ==============================
   Karte & Anmeldung
============================== */
.karte {
  background-position: center;
  background-size: cover;
  position: relative;
  height: 160px;
  border-radius: 12px;
  margin-top: 10px;
}

.karte a.button {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: #5F9B00;
  color: #fff;
  border-radius: 12px;
  padding: 10px 15px;
  width: fit-content;
  line-height: initial;
}

.anmeldung {
  font-size: 1.125rem;
}

.anmeldung div {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.anmeldung a.button {
  flex-basis: 50%;
  flex-grow: 2;
  background-color: #EBEBEB;
  border-radius: 12px;
  font-size: 1.125rem;
  font-weight: 700;
  color: #404040;
  padding: 20px;
  line-height: initial;
}

/* ==============================
   Zeiten
============================== */
.zeiten {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  line-height: 150%;
}

.zeiten .ende {
  text-align: right;
}

.zeiten::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 40px;
  width: 2px;
  background-color: #404040;
}

.zeiten b {
  font-size: 1.125rem;
}

/* ==============================
   Notes
============================== */
.note img {
  display: block;
  margin: 14px auto 10px;
}

article > .button.note {
  font-weight: 400;
  line-height: 130%;
}

article.flexbox.termine .note a.button {
  background: linear-gradient(90deg, #7AB51D, #005EA8);
  color: #fff;
  line-height: 43px;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  padding: 1px 16px;
  margin: 20px auto;
  width: fit-content;
}

/* ==============================
   Profile Links
============================== */
ul.links.profil img {
  transform: translateY(30%);
  margin-right: 10px;
}

.links.profil li a::after {
  transform: none;
}

.profil li {
  margin-top: 20px;
}

/* ==============================
   Forms
============================== */
fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

form > label {
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 150%;
  margin-top: 20px;
}

fieldset legend {
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 120%;
  margin-bottom: 10px;
}

form > input,
form > select {
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 16px;
  font-size: 1.125rem;
}

input[type=radio],
input[type=checkbox] {
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  border: 1px solid #404040;
  height: 1.5rem;
  width: 1.5rem;
  display: inline-block;
  border-radius: 100%;
  vertical-align: text-bottom;
  position: relative;
  margin: -2px 4px -2px 0;
}

input[type=radio]::before,
input[type=checkbox]::before {
  content: "";
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  top: 0;
}

input[type=checkbox] {
  border-radius: 10%;
}

input[type=radio]::before {
  height: 0;
  width: 0;
}

input[type=radio]:checked::before {
  border: 9px solid transparent;
  border-radius: 100%;
  outline-offset: -3px;
  background: #7AB51D;
}

input[type=checkbox]:indeterminate::before,
input[type=checkbox][aria-checked="mixed"]::before {
  border: 2px solid #222;
  height: 0;
  width: 40%;
}

input[type=checkbox]:checked::before {
  border-right: 3px solid #000;
  border-bottom: 3px solid #000;
  height: 50%;
  width: 30%;
  transform: rotate(45deg) translateY(-20%) translateX(-10%);
}

label {
  font-size: 1.125rem;
  font-weight: 700;
}

fieldset label {
  margin-right: 20px;
}

form button,
.logout {
  width: 100%;
  margin: 40px 0 10px;
  height: 43px;
  background-color: #005EA8;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
}

.delete a {
  text-decoration: underline;
  color: #404040;
  font-weight: 700;
}

a.logout {
  display: block;
  text-align: center;
  line-height: 43px;
  background-color: #EBEBEB;
  color: #404040;
  margin-top: 0;
}