/* =========================================================
   UPDATES – content-updates.css
========================================================= */


/* =========================================================
   1) WRAPPER / INTRO
========================================================= */

          .updates-wrap{
            max-width: 980px;
            margin: 0 auto;
          }

          .updates-intro{
            margin-bottom: calc(var(--menu-gap) * 1.45);

            font-size: var(--font-size-content);
            line-height: var(--line-height-text);
            color: rgba(255,255,255,0.88);
          }


/* =========================================================
   2) JAHRES-ABSCHNITTE
========================================================= */

          .updates-section{
            margin-top: calc(var(--menu-gap) * 2.0);
          }

          .updates-section:first-of-type{
            margin-top: 0;
          }

          .updates-year-aktuell{
            margin: 0 0 calc(var(--menu-gap) * 1.5) 0;
            padding-left: 1px;
            padding-top: 2px;

            font-family: var(--font-style-headline);
            font-size: calc(var(--font-size-headline-section) * 0.9);
            color: #fff;
          }          
          
          .updates-year-title,
          .updates-subtitle{
            margin: 0 0 calc(var(--menu-gap) * 1.5) 0;
            padding-left: 1px;
            padding-top: 70px;

            font-family: var(--font-style-headline);
            font-size: calc(var(--font-size-headline-section) * 0.9);
            color: #fff;
          }

          .updates-list{
            list-style: none;
            margin: 0;
            padding: 0;
          }


/* =========================================================
   3) UPDATE-ROW (GRID)
========================================================= */

          .update{
            position: relative;

            display: grid;
            grid-template-columns: 170px 1fr;
            gap: calc(var(--menu-gap) * 1.0);
            align-items: strech;

            margin-bottom: calc(var(--menu-gap) * 3.25);
            padding-bottom: calc(var(--menu-gap) * 3.15);
          }

          .update:last-child{
            margin-bottom: 0;
            padding-bottom: 0;
          }


/* =========================================================
   5) TRENNLINIE ZWISCHEN BLÖCKEN
========================================================= */

          .update::after{
            content: "";
            position: absolute;

            left: 10%;
            right: 10%;
            bottom: +27px;

            height: 2px;

            background: linear-gradient(
              to right,
              transparent,
              rgba(255,255,255,0.35) 20%,
              rgba(255,255,255,0.35) 80%,
              transparent
            );         

            pointer-events: none;
          }

          .updates-list > .update:last-child::after{
            display: none;
          }

/* =========================================================
   6) DATUMS-BOX – flexibel mit Mindesthöhe
========================================================= */

          .update-date{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 0.9rem;

            min-height: 150px;   
            height: 100%;

            padding: 0.9rem 0.8rem;

            border: 1px solid rgba(255,255,255,0.18);
            border-radius: var(--radius-sm);
            background: var(--color-highlight-section-bg);
          }


      /* obere Zeile: Datum + Badge */

          .update-date-top{
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.75rem;
          }

          .update-date-top time{
            display: block;
            min-width: 0;
          }

          .update-date-day{
            display: block;

            font-family: var(--font-style-ui);
            font-size: var(--font-size-headline-minor);
            font-weight: 900;
            line-height: 1.12;
            color: #fff;
          }

          .update-date-time{
            display: block;
            margin-top: 4px;

            font-size: 0.75rem;
            line-height: 1.2;
            color: rgba(255,255,255,0.70);
          }


/* =========================================================
   7) TAGS
========================================================= */

          .update-tag{
            align-self: flex-start;

            padding: 3px 8px;
            border-radius: 2px;

            font-size: 0.65rem;
            font-weight: 800;
            letter-spacing: 0.04em;

            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.18);

            color: rgba(255,255,255,0.85);
          }

          .update-tag--site{
            background: rgba(180,190,255,0.12);
            border-color: rgba(180,190,255,0.25);
          }

          .update-tag--news{
            background: rgba(255,180,180,0.12);
            border-color: rgba(255,180,180,0.25);
          }


/* =========================================================
   8) BADGE IN DATUMSZEILE
========================================================= */

          .update-date .badge{
            flex: 0 0 auto;
            align-self: flex-start;
            margin-top: 0;
          }


/* =========================================================
   9) CONTENT (RECHTS)
========================================================= */

          .update-content{
            display: flex;
            flex-direction: column;
            gap: calc(var(--menu-gap) * 0.7);
            min-width: 0;
          }


/* =========================================================
   10) CARD (EINZEL)
========================================================= */

          .update-card{
            position: relative;

            padding: 0.95rem;

            border: 1px solid rgba(255,255,255,0.14);
            border-radius: var(--radius-sm);
  /*--          
            background:
              linear-gradient(
                to bottom,
                rgba(255,255,255,0.035) 0%,
                rgba(10,8,50,0.25) 18%,
                var(--color-highlight-box-bg) 60%,
                var(--color-highlight-box-bg) 100%
              );
  --*/
            background: var(--color-box-bg);              

            transition: background .2s ease, border-color .2s ease;
          }

          .update-card:hover{
            background: rgba(0,0,0,0.20);
            border-color: rgba(255,255,255,0.24);
          }


/* =========================================================
   11) STACK
========================================================= */

          .update-stack{
            display: grid;
            gap: calc(var(--menu-gap) * 0.7);
          }


/* =========================================================
   12) TEXT
========================================================= */

          .update-meta{
            margin: 0 0 4px 0;
          }

          .update-time{
            font-size: 0.75rem;
            line-height: 1.2;
            color: rgba(255,255,255,0.7);
          }

          .update-headline{
            margin: 0 0 4px 0;

            font-family: var(--font-style-headline);
            font-size: calc(var(--font-size-content) * 1.05);
            line-height: 1.25;
            color: #fff;
          }

          .update-text{
            margin: 0;

            font-size: var(--font-size-content);
            line-height: var(--line-height-text);
            color: rgba(255,255,255,0.9);
          }


/* =========================================================
   13) LISTEN / LINKS
========================================================= */

          .update-list-inner,
          .update-listing{
            margin: 8px 0 0 0;
            padding: 0;
            list-style: none;
          }

          .update-list-inner li,
          .update-listing li{
            position: relative;
            margin-bottom: 5px;
            padding-left: 18px;
          }

          .update-list-inner li::before,
          .update-listing li::before{
            content: "›";
            position: absolute;
            left: 0;
            top: 0;

            font-weight: 900;
            color: rgba(255,255,255,0.55);
          }

          .update-list-inner li:last-child,
          .update-listing li:last-child{
            margin-bottom: 0;
          }

          .update-links{
            margin-top: 8px;
          }

          .update-links a{
            font-weight: 700;
          }


/* =========================================================
   14) AKTIVE / NEUE EINTRÄGE
========================================================= */

          .update--active .update-card{
            border-color: rgba(180,190,255,0.45);
          }


/* =========================================================
   15) MOBILE
========================================================= */

@media (max-width: 700px){

          .update{
            display: block;
            position: relative;

            margin-bottom: calc(var(--menu-gap) * 1.8);
            padding: 0;

            border: 1px solid rgba(180,190,255,0.24);
            border-radius: var(--radius-sm);
/*--
            background:
              linear-gradient(
                to bottom,
                rgba(255,255,255,0.035) 0%,
                rgba(10,8,50,0.35) 85%,
                rgba(0,0,0,0.45) 100%
              );
  --*/
background: var(--color-box-bg);

            box-shadow:
              0 14px 34px rgba(0,0,0,0.45),
              inset 0 0 0 1px rgba(255,255,255,0.05);

            overflow: hidden;
          }

          .update:last-child{
            margin-bottom: 0;
          }

          .update::before,
          .update::after{
            display: none;
          }


/* ---------------------------------------------------------
   DATUM / HEADER
--------------------------------------------------------- */

          .update-date{
            min-height: 0;
            height: auto;

            display: flex;
            flex-direction: column;
            gap: 0.55rem;

            padding: 1rem 1rem 0.8rem 1rem;

            border: none;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
          }

          .update-date-top{
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.75rem;
          }

          .update-date-top time{
            display: block;
            min-width: 0;
          }

          .update-date-day{
            display: block;

            font-family: var(--font-style-ui);
            font-size: 1.02rem;
            font-weight: 900;
            line-height: 1.08;
            color: #fff;
          }

          .update-date-time{
            display: block;
            margin-top: 4px;

            font-size: 0.78rem;
            line-height: 1.2;
            color: rgba(255,255,255,0.72);
          }


/* ---------------------------------------------------------
   BADGE
--------------------------------------------------------- */

          .update-date .badge{
            flex: 0 0 auto;
            align-self: flex-start;

            padding: 4px 9px;
            border-radius: 999px;

            font-size: 0.62rem;
            line-height: 1;
          }


/* ---------------------------------------------------------
   TAG
--------------------------------------------------------- */

          .update-tag{
            align-self: flex-start;
            margin-top: 0;

            padding: 4px 10px;
            border-radius: 8px;

            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.04em;

            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.18);
            color: rgba(255,255,255,0.88);
          }


/* ---------------------------------------------------------
   CONTENT IN GLEICHER KARTE
--------------------------------------------------------- */

          .update-card{
            position: relative;

            margin: 0;
            padding: 0 1rem 1rem 1rem;

            border: none;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
          }

          .update-card:hover{
            background: transparent;
            border: none;
          }

          .update-card::before{
            content: "";
            display: block;
            height: 1px;
            margin: 0 0 0.95rem 0;

            background: linear-gradient(
              to right,
              transparent,
              rgba(255,255,255,0.16) 12%,
              rgba(255,255,255,0.16) 88%,
              transparent
            );
          }


/* ---------------------------------------------------------
   STACK
--------------------------------------------------------- */

          .update-stack{
            margin: 0;
            padding: 0 0 1rem 0;

            display: grid;
            gap: 0;
          }

          .update-stack .update-card{
            padding: 0 1rem 0 1rem;
          }

          .update-stack .update-card::before{
            content: "";
            display: block;
            height: 1px;
            margin: 0 0 0.95rem 0;

            background: linear-gradient(
              to right,
              transparent,
              rgba(255,255,255,0.16) 12%,
              rgba(255,255,255,0.16) 88%,
              transparent
            );
          }

          .update-stack .update-card + .update-card{
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid rgba(255,255,255,0.10);
          }


/* ---------------------------------------------------------
   TYPO / INHALT
--------------------------------------------------------- */

          .update-meta{
            margin: 0 0 5px 0;
          }

          .update-time{
            font-size: 0.78rem;
            line-height: 1.2;
            color: rgba(255,255,255,0.70);
          }

          .update-headline{
            margin: 0 0 7px 0;

            font-family: var(--font-style-headline);
            font-size: calc(var(--font-size-content) * 1.08);
            line-height: 1.2;
            color: #fff;
          }

          .update-text{
            margin: 0;

            font-size: var(--font-size-content);
            line-height: 1.46;
            color: rgba(255,255,255,0.92);
          }


/* ---------------------------------------------------------
   LISTEN / LINKS
--------------------------------------------------------- */

          .update-list-inner,
          .update-listing{
            margin: 10px 0 0 0;
            padding: 0;
            list-style: none;
          }

          .update-list-inner li,
          .update-listing li{
            position: relative;
            margin-bottom: 6px;
            padding-left: 18px;
          }

          .update-list-inner li::before,
          .update-listing li::before{
            content: "›";
            position: absolute;
            left: 0;
            top: 0;

            font-weight: 900;
            color: rgba(255,255,255,0.48);
          }

          .update-list-inner li:last-child,
          .update-listing li:last-child{
            margin-bottom: 0;
          }

          .update-links{
            margin-top: 12px;
          }

          .update-links a{
            font-weight: 700;
          }


/* ---------------------------------------------------------
   AKTIVE / NEUE EINTRÄGE
--------------------------------------------------------- */

          .update--active{
            border-color: rgba(180,190,255,0.32);

            box-shadow:
              0 14px 30px rgba(0,0,0,0.30),
              0 0 14px rgba(180,190,255,0.10),
              inset 0 0 0 1px rgba(255,255,255,0.04);
          }

}