:root {
    --primary-color: #161616;
    --highlight-color: rgba(218, 0, 0, 0.74);
}

.text-color-primary, body {
    color: var(--primary-color);
}

.text-color-highlight {
    color: var(--highlight-color);
}

.split-left {
    float:left;
    width:50%;

}

.split-right {
    float:right;
    width:50%;
}

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

body {
    width:100%;
    margin: 0;
    padding: 0;
    background-image: url('http://localhost/calendar-app-apple-style/stock/bg/light-bg-2.jpg');
    background-size:fill;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;    
}

body, #cal-day-text span, #cal-headline{
    font-size: 2vw;
}

#cal-day-number span, #degrees span {
    font-size: 3.5vw;
}

.time span, #weatherIcon {
    font-size: 10vw;
}

.blur {
    backdrop-filter: blur(10px);
    height:100%;
    width:100%;
    position: absolute;
    top:0px;
    left:0px;
    padding:0;
    margin:0;
    display: flex;
    justify-content: center;
}

.app-container {
    width: 80%;
    height:80%;
    border-radius: 3vw;
    padding: 2vw;
}

.frosted-glass {
  backdrop-filter: blur(15px);
  background: rgba(255, 255, 255, 0.3);
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  margin-bottom:3vw;
  height:auto;
}



.cal-content-wrap {
    display:flex;
    gap:2vw;
    height:auto;
    overflow: hidden; 
}

.cal-user {
    height:auto;
    width: 6vw;
}

.cal-content {
    display:flex;
    flex-direction: column;
    gap:1vw;
    width:100%;
}

#cal-headline {
    padding: 1vw 0;
}

.cal-user {
    max-width: 6vw;
}

.cal-font-small {
    font-size: 2vw;
}

.cal-user img{
    width:100%;
    height: auto;
    border-radius: 50%;
    object-fit:cover;   
    aspect-ratio: 1/1;  
}

.cal-detail-wrap{
    max-height: 6vw;
    width:90%;
    display: flex;
    gap: 1vw;
    align-items: center;
    border-bottom: solid 1px rgba(0,0,0,0.2);
    
}

.calendar-subject {
    padding: 0 0 0 2vw;
}

.calendar-entry {
  padding: 6px 0;
}

.cal-detail-wrap {
  display: flex;
  justify-content: space-between; /* Subject links, Zeiten rechts */
  align-items: flex-start;        /* obere Ausrichtung */
}

.calendar-subject {
  font-weight: 500;
}

.calendar-times {
  display: flex;
  flex-direction: column;  /* übereinander */
  text-align: right;
  min-width: 60px;         /* damit es sauber ausgerichtet ist */
}

.calendar-time-from,
.calendar-time-to {
  font-size: 0.85rem;
  line-height: 1.2;
}

.calendar-subject {
  font-weight: 500;
  display: flex;               /* Flexbox aktivieren */
  align-items: center;         /* Vertikal mittig */
  gap: 6px;                    /* Abstand zwischen Icon und Text */
}

.cal-icon {
  background-color: var(--highlight-color);   /* Kreisfarbe (blau) */
  color: #fff;                 /* Icon-Farbe (weiß) */
  border-radius: 50%;          /* macht es rund */
  font-size: 0.8rem;           /* Icon-Größe */
  display: flex !important;               /* Flexbox im Kreis */
  align-items: center !important;         /* zentriert vertikal */
  justify-content: center !important;     /* zentriert horizontal */
  width: 24px;                 /* feste Kreisgröße */
  height: 24px;
}

.cal-slider {
      position: relative;
      width: 100%;
      height: auto;

    }
    .cal-tab {
    position: relative;
    display:none;
    pointer-events: all;
    transition: opacity 0.5s ease;
    }
    .cal-tab.active {
    display: block;
    pointer-events: all;
    position: relative; /* wichtig, sonst nimmt das Eltern-Div keine Höhe an */
    }

#calendar-app {
    min-height:15vw;
    height:auto;
}




#weather-app {
    height: auto;
    overflow:hidden;
}

#weather-animation {
      min-height: 100px;
      max-height: 100px;
      position: relative;
      margin-bottom: 2vw;
      display: flex;
      justify-content: center;
}

#weather-container {
    width: auto;
    height: auto;
    max-height: 100px;    
}

.time {
    text-align: center;
    max-height:150px;
}

.time span {
    color:white;
    opacity: 85%;
    text-shadow: #474747 3px 5px 2px, 2px 2px 3px rgba(206,89,55,0);

}

#weatherIcon {
    color:white;
}

#weather-container #weatherIcon .fa-bolt  {
    color:yellow
}

#weather-container #weatherIcon .fa-sun  {
  color:yellow;
  animation: spinSun 6s linear infinite;
  display: inline-block;
}

@keyframes spinSun {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Default styles (desktop-first or mobile-first base) */

/* Extra small devices (phones, portrait, < 576px) */
@media only screen and (max-width: 575.98px) {

    .app-container, .cal-content-wrap { width:100%;}

    .frosted-glass {padding:2vw;}

    .cal-user {
        max-width: 18vw;
        width: 18vw;
    }
    .cal-detail-wrap {
        max-height:min-content;
        flex-direction: column;
    }

    .calendar-date span {
        font-size: 4vw;
    }
    body, #cal-day-text span, #cal-headline{
        font-size: 6vw;
    }

    #cal-day-number span, #degrees span {
        font-size: 7.5vw;
    }

    .time span, #weatherIcon {
        font-size: 13vw;
    }

    #weather-animation {
        min-height: 60px
    } 
}

/* Small devices (phones landscape, ≥576px and <768px) */
@media only screen and (min-width: 576px) and (max-width: 767.98px) {

    body, #cal-day-text span, #cal-headline {
        font-size: 4.5vw;
    }

    #cal-day-number span, #degrees span {
        font-size: 7.5vw;
    }

    .time span, #weatherIcon {
        font-size: 13vw;
    }

    #weather-animation {
        min-height: 60px
    }
}


/* Medium devices (tablets, ≥768px and <992px) */
@media only screen and (min-width: 768px) and (max-width: 991.98px) {

    body, #cal-day-text span, #cal-headline{
        font-size: 3.5vw;
    }

    #cal-day-number span, #degrees span {
        font-size: 7.5vw;
    }

    .time span, #weatherIcon {
        font-size: 13vw;
    }

    #weather-animation {
        min-height: 60px
    }
}


/* Large devices (desktops, ≥992px and <1200px) */
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {


}


/* Extra large devices (large desktops, ≥1200px) */
@media only screen and (min-width: 1200px) {

    .time {
        margin-top: 0;
    }

    .time span {
        font-size: 7vw;
    }

    #degrees span {
        font-size: 2.5vw;
    }

       
    body {
        font-size: 2vw;
    }
}