/* =======================
   Collapsible Sections
   ======================= */
body {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 1rem;
}
.logo{
    font-size: var(--fs-xxxl);
    color: var(--highlight-color);
    margin: 0;
}

.logo-container{
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin: 0;
}
.logo-img{
    width: calc(var(--fs-xxxl) * 1.15);
    height: var(--fs-xxxl);
}
.welcome-line{
    font-size: var(--fs-xl);
    color: var(--highlight-color);
}
.welcome{
    font-size: var(--fs-md);
    padding: 1rem;
    text-align: center;
}
.welcome .welcome-line{
    font-size: var(--fs-xl);
    font-weight: bold;
    z-index: 1;
    margin: 0 3rem;
}
.collapsible {
  margin: 1.5rem auto;
  max-width: 80%;
  background-color: var(--card-color);
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.3s ease;
    font-size: var(--fs-sm);
}

/* Header button that looks like your section labels */
.collapsible-header {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--btn-color);
  padding: 1rem;
  cursor: pointer;
  font-family: 'Oswald', sans-serif;
  transition: background 0.2s ease;
}

.collapsible-header:hover {
  background-color: var(--btn-hover-color);
  color: var(--bg-color);
}

.collapsible-header.active {
  background-color: var(--btn-color);
  color: var(--bg-color);
}

/* Hidden content box */
.collapsible-content {
  padding: 0 1rem;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-size: var(--fs-sm);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

/* small spacing and readability */
.collapsible-content p,
.collapsible-content ul {
  margin: 1rem 0;
}

.collapsible-content ul {
  padding-left: 1.2rem;
}

.collapsible-content li {
  margin: 0.4rem 0;
}


/* Countdown style */
.countdown {
  text-align: center;
  font-size: var(--fs-md);
  margin: 2rem auto 2rem;
  padding: 1rem;
  background-color: var(--card-color);
  border-radius: 1rem;
}

#schedule-desktop-content{
    padding: 2rem;
}
/* Aktuelles mobile only */

/* Media query: for desktop screens */


/* Base layout: mobile first */
.homepage-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.aktuelles-desktop {
  display: none; /* hidden on mobile */
}

.aktuelles-mobile {
  display: block;
}
.top-line svg{
    width: var(--fs-xl);
    height: var(--fs-xl);
    vertical-align: text-bottom;
    position: absolute;
    right: 1rem;   /* distance from the right edge */
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color);
}

.login-icon-wrapper:hover svg {
  color: var(--highlight-color);             /* color on hover */
  transform: scale(1.1);      /* optional slight grow effect */
transform: translateY(-50%);
}

.top-line {
    position: relative;
    width: 100%;
    height: 3rem; /* adjust as needed */
    display: flex;
    justify-content: center; /* centers text horizontally */
    align-items: center;     /* vertical centering */
}


/* Desktop layout */
@media (min-width: 768px) {
  .homepage-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

  .main-content {
    flex: 1; /* main content grows */

  }

  .profile-container {
    display: flex;
    flex-direction:row;
    align-items: flex-start;
    gap: 2rem;
    width: 100%;

}

  .aktuelles-desktop {
    display: block;
    flex: 0 0 25%; /* right sidebar width */
    border-left: 2px solid var(--btn-color);
    padding-left: 1rem;
    margin-top: 2rem;
    border-radius: 1rem;
    background-color: var(--card-color);
  }

  .aktuelles-mobile {
    display: none !important; /* hide mobile version on desktop */
  }
}

/* Aktuelles mobile only */
.aktuelles-mobile {
  display: block;
}


@media (max-width: 767px) {
  .aktuelles-desktop { display: none; }
  .welcome{
        font-size: var(--fs-md);
    }
    .collapsible-content{
        font-size: var(--fs-md);
    }
}