/* =========================================================
   STARTSEITE (BOXEN)
   Datei: content-startseite-boxen.css
   Inhalt: Boxen der Startseite (Dashboard / Cards / Listen)
========================================================= */


/* =========================================================
   1) STARTSEITE – BOXEN (Dashboard)
========================================================= */

    /* Optik: Farben, Typo, Borders, Shadows, States) */
          .home-card{
            display: flex;
            flex-direction: column;            
            background: var(--color-box-bg);
            border: 1px solid var(--color-box-border);
            border-radius: var(--radius-sm);
            padding: calc(var(--menu-gap) * 0.9);
          }

          .home-card-title{
            margin: 0;
            font-family: var(--font-style-headline);
            font-size: var(--font-size-headline-section);
            line-height: var(--line-height-headline-md);
            color: #fff;
          }

          .home-card-link{
            font-family: var(--font-style-ui);
            font-size: var(--font-size-headline-minor);
            line-height: var(--line-height-ui);
            color: var(--color-link);
            text-decoration: none;
            position: relative;
          }

          .home-card-link::after{
            content: "";
            position: absolute;
            left: 50%;
            bottom: -2px;
            width: 0;
            height: 1.5px;
            background: currentColor;
            transition: width 0.25s ease, left 0.25s ease;
          }

          .home-card-link:hover{
            color: var(--color-link-hover);
          }

          .home-card-link:hover::after{
            width: 100%;
            left: 0;
          }

          .home-card-big{
            margin-bottom: auto;            
            font-family: var(--font-style-text);
            font-size: var(--font-size-content);
            line-height: var(--line-height-text);
            color: rgba(255,255,255,0.95);
            max-width: none;
          }

          .home-card-sub{
            margin: calc(var(--menu-gap) / 2) 0 0 0;
            font-family: var(--font-style-ui);
            font-size: var(--font-size-headline-minor);
            line-height: var(--line-height-ui);
            color: rgba(255,255,255,0.75);
            max-width: none;
          }

          .home-card-sub a{
            color: var(--color-link);
            text-decoration: none;
            position: relative;
          }

          .home-card-sub a::after{
            content: "";
            position: absolute;
            left: 50%;
            bottom: -2px;
            width: 0;
            height: 1.5px;
            background: currentColor;
            transition: width 0.25s ease, left 0.25s ease;
          }

          .home-card-sub a:hover{
            color: var(--color-link-hover);
          }

          .home-card-sub a:hover::after{
            width: 100%;
            left: 0;
          }

    /* Struktur / Grid / Flow / Responsive) */
          .home-boxes{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--menu-gap);
            margin-top: var(--menu-gap);
          }

          .home-card-wide{
            grid-column: 1 / -1;
          }

          .home-card-head{
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: calc(var(--menu-gap) / 2);
            margin-bottom: calc(var(--menu-gap) / 2);
          }


/* =========================================================
   2) FEATURED NEWS – Box
========================================================= */

    /* Optik: Farben, Typo, Borders, Shadows, States) */
          .featured-news-img{
            width: 100%;
            height: 130px;
            object-fit: cover;
            display: block;
            border-radius: var(--radius-sm);
            border: 1px solid rgba(255,255,255,0.16);
          }

          .featured-news-meta{
            margin: 0;
            font-family: var(--font-style-ui);
            font-size: var(--font-size-headline-minor);
            line-height: var(--line-height-ui);
            color: rgba(255,255,255,0.75);
            max-width: none;
          }

          .featured-news-title{
            margin: calc(var(--menu-gap) / 4) 0 0 0;
            font-family: var(--font-style-headline);
            font-size: var(--font-size-headline-sub);
            line-height: var(--line-height-headline-sm);
            color: #fff;
          }

          .featured-news-link{
            color: #fff;
            text-decoration: none;
            position: relative;
          }

          .featured-news-link::after{
            content: "";
            position: absolute;
            left: 50%;
            bottom: -2px;
            width: 0;
            height: 1.5px;
            background: currentColor;
            transition: width 0.25s ease, left 0.25s ease;
          }

          .featured-news-link:hover{
            color: var(--color-link-hover);
          }

          .featured-news-link:hover::after{
            width: 100%;
            left: 0;
          }

          .featured-news-text{
            margin: calc(var(--menu-gap) / 3) 0 0 0;
            font-family: var(--font-style-text);
            font-size: var(--font-size-content);
            line-height: var(--line-height-text);
            color: rgba(255,255,255,0.90);
            max-width: none;
          }

          .featured-news-more{
            display: inline-block;
            margin-top: calc(var(--menu-gap) / 2.5);
            font-family: var(--font-style-ui);
            font-size: var(--font-size-headline-minor);
            line-height: var(--line-height-ui);
            color: var(--color-link);
            text-decoration: none;
            position: relative;
          }

          .featured-news-more::after{
            content: "";
            position: absolute;
            left: 50%;
            bottom: -2px;
            width: 0;
            height: 1.5px;
            background: currentColor;
            transition: width 0.25s ease, left 0.25s ease;
          }

          .featured-news-more:hover{
            color: var(--color-link-hover);
          }

          .featured-news-more:hover::after{
            width: 100%;
            left: 0;
          }

    /* Struktur / Grid / Flow / Responsive) */
          .home-featured{
            padding: calc(var(--menu-gap) * 1.1);
          }

          .featured-news{
            display: grid;
            grid-template-columns: 180px 1fr;
            gap: calc(var(--menu-gap) / 1.15);
            align-items: start;
          }

          .featured-news-body{
            min-width: 0;
          }


/* =========================================================
   3) HEUTE IN … – Box
========================================================= */

    /* Optik: Farben, Typo, Borders, Shadows, States) */
          .today-panel{
            border-radius: var(--radius-sm);
            border: 1px solid rgba(255,255,255,0.18);
            background: rgba(0,0,0,0.18);
          }

          .today-label{
            font-family: var(--font-style-ui);
            font-size: var(--font-size-headline-minor);
            line-height: var(--line-height-ui);
            color: rgba(255,255,255,0.75);
            letter-spacing: 0.06em;
            text-transform: uppercase;
            margin: 0 0 calc(var(--menu-gap) / 3) 0;
          }

          .today-value{
            font-family: var(--font-style-headline);
            font-size: var(--font-size-headline-main);
            line-height: var(--line-height-headline-lg);
            color: #fff;
            margin: 0;
          }

    /* Struktur / Grid / Flow / Responsive) */
          .today-panel{
            padding: calc(var(--menu-gap) * 0.9);
          }


/* =========================================================
   4) TOURSTART BADGE – Box
========================================================= */

    /* Optik: Farben, Typo, Borders, Shadows, States) */
          .countdown-badge{
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            min-width: 78px;
            padding: calc(var(--menu-gap) / 2.2) calc(var(--menu-gap) / 1.4);

            border-radius: var(--radius-sm);
            border: 1px solid rgba(255,255,255,0.22);
            background: rgba(0,0,0,0.25);
            box-shadow: 0 10px 22px rgba(0,0,0,0.25);
          }

          .countdown-number{
            font-family: var(--font-style-headline);
            font-size: var(--font-size-headline-main);
            line-height: var(--line-height-headline-lg);
            color: var(--color-link);
            font-weight: 700;
          }

          .countdown-label{
            font-family: var(--font-style-ui);
            font-size: var(--font-size-headline-minor);
            line-height: var(--line-height-ui);
            color: rgba(255,255,255,0.80);
            letter-spacing: 0.08em;
            text-transform: uppercase;
          }

          .countdown-text{
            margin: 0;
            font-family: var(--font-style-text);
            font-size: var(--font-size-content);
            line-height: var(--line-height-text);
            color: rgba(255,255,255,0.92);
            max-width: none;
          }

          .countdown-subline{
            font-family: var(--font-style-ui);
            font-size: var(--font-size-headline-minor);
            line-height: var(--line-height-ui);
            color: rgba(255,255,255,0.75);
          }

    /* Struktur / Grid / Flow / Responsive) */
          .countdown-row{
            display: grid;
            grid-template-columns: auto 1fr;
            gap: calc(var(--menu-gap) / 1.25);
            align-items: center;
          }


/* =========================================================
   5) ALBUM BOX – Box
========================================================= */

    /* Optik: Farben, Typo, Borders, Shadows, States) */
          .album-cover{
            width: 100%;
            height: 88px;
            object-fit: cover;
            display: block;
            border-radius: var(--radius-sm);
            border: 1px solid rgba(255,255,255,0.16);
          }

          .album-title{
            margin: 0;
            font-family: var(--font-style-headline);
            font-size: var(--font-size-headline-sub);
            line-height: var(--line-height-headline-sm);
            color: #fff;
          }

          .album-sub{
            margin: calc(var(--menu-gap) / 4) 0 0 0;
            font-family: var(--font-style-ui);
            font-size: var(--font-size-headline-minor);
            line-height: var(--line-height-ui);
            color: rgba(255,255,255,0.75);
            max-width: none;
          }

          .album-more{
            display: inline-block;
            margin-top: calc(var(--menu-gap) / 3);
            font-family: var(--font-style-ui);
            font-size: var(--font-size-headline-minor);
            line-height: var(--line-height-ui);
            color: var(--color-link);
            text-decoration: none;
            position: relative;
          }

          .album-more::after{
            content: "";
            position: absolute;
            left: 50%;
            bottom: -2px;
            width: 0;
            height: 1.5px;
            background: currentColor;
            transition: width 0.25s ease, left 0.25s ease;
          }

          .album-more:hover{
            color: var(--color-link-hover);
          }

          .album-more:hover::after{
            width: 100%;
            left: 0;
          }

    /* Struktur / Grid / Flow / Responsive) */
          .album-row{
            display: grid;
            grid-template-columns: 88px 1fr;
            gap: calc(var(--menu-gap) / 1.25);
            align-items: start;
          }

          .album-meta{
            min-width: 0;
          }


/* =========================================================
   6) MINI-NEWS-LISTE – Box
========================================================= */

    /* Optik: Farben, Typo, Borders, Shadows, States) */
          .mini-item{       
            border-top: 1px solid rgba(255,255,255,0.12);
          }

          .mini-item:first-child{
            border-top: none;
          }

          .mini-date{
            font-family: var(--font-style-ui);
            font-size: var(--font-size-headline-minor);
            line-height: var(--line-height-ui);
            color: rgba(255,255,255,0.75);
            white-space: nowrap;
          }

          .home-boxes a.mini-text{
            display: block;
            min-width: 0;

            color: var(--color-link);
            text-decoration: none;
            position: relative;

            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .home-boxes a.mini-text::after{
            content: "";
            position: absolute;
            left: 50%;
            bottom: -2px;
            width: 0;
            height: 1.5px;
            background: currentColor;
            transition: width 0.25s ease, left 0.25s ease;
          }

          .home-boxes a.mini-text:hover{
            color: var(--color-link-hover);
          }

          .home-boxes a.mini-text:hover::after{
            width: 100%;
            left: 0;
          }

    /* Struktur / Grid / Flow / Responsive) */
          .mini-list{
            list-style: none;
            margin: 0;
            padding: 0;
          }

          .mini-item{
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            gap: calc(var(--menu-gap) / 2);
            padding: calc(var(--menu-gap) / 2) 0;
            align-items: center;
          }

          .mini-item:first-child{
            padding-top: 0;
          }


/* =========================================================
   7) RESPONSIVE – Boxen
========================================================= */

@media (max-width: 768px){

          .home-boxes{
            grid-template-columns: 1fr;
          }

          .home-card-wide{
            grid-column: auto;
          }

          .featured-news{
            grid-template-columns: 1fr;
          }

          .featured-news-img{
            height: 180px;
          }

          .countdown-badge{
            min-width: 72px;
          }

          .album-cover{
            height: 88px;
          }

          .album-row{
            grid-template-columns: 88px 1fr;
          }
}