/* =========================================================
   NEWS – HAUPTDESIGN
   Datei: content-news.css
========================================================= */


/* =========================================================
   1) LIST RESET
========================================================= */

          .news-list,
          .news-list li,
          .news-entry{
            list-style: none !important;
          }

          .news-list{
            margin: 0;
            padding: 0;
          }

          .news-entry::marker{
            content: "" !important;
          }


/* =========================================================
   2) WRAPPER / INTRO
========================================================= */

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

          .news-intro{
            margin: 0;

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

          .news-intro-bar{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: calc(var(--menu-gap) * 0.8);

            margin-bottom: calc(var(--menu-gap) * 1.45);
          }

          .news-archive-link{
            flex: 0 0 auto;
            margin: 0;
            display: block;
            text-decoration: none;
          }

          .news-archive-link a{
            display: inline-flex;
            align-items: center;
            justify-content: center;

            padding: 0.55rem 0.9rem;

            border: 1px solid rgba(255,255,255,0.18);
            border-radius: var(--radius-sm);

            background: var(--color-highlight-section-bg);

            box-shadow:
              inset 0 0 0 1px rgba(255,255,255,0.04);

            font-family: var(--font-style-ui);
            font-size: calc(var(--font-size-content) * 0.85);
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
          }

          .news-archive-link a:hover{
            border-color: rgba(180,190,255,0.55);

            box-shadow:
              0 16px 36px rgba(0,0,0,0.45);
          }


/* =========================================================
   3) ENTRY
========================================================= */

          .news-entry{
            position: relative;

            margin-bottom: calc(var(--menu-gap) * 1.4);
            padding-bottom: calc(var(--menu-gap) * 1.2);
          }

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

          .news-entry::after{
            content: "";
            position: absolute;

            left: 10%;
            right: 10%;
            bottom: 0;

            height: 1px;
            background: var(--color-box-bg);
          }

          .news-entry:last-child::after{
            display: none;
          }


/* =========================================================
   4) DATEBAR
========================================================= */

          .news-datebar{
            position: relative;
            z-index: 2;

            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.55rem;

            margin-left: -10px;
            margin-bottom: calc(var(--menu-gap) * 0.45);
            padding: 0.6rem 0.8rem;

            border: 1px solid rgba(180,190,255,0.22);
            border-radius: var(--radius-sm);

            background: var(--color-highlight-box-bg);
            backdrop-filter: blur(6px);
          }

          .news-datebar-time{
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;

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

          .news-datebar-day,
          .news-datebar-clock{
            white-space: nowrap;
          }

          .news-datebar-sep{
            color: rgba(255,255,255,0.55);
          }

          .news-tag{
            margin-left: auto;

            display: inline-flex;
            align-items: center;
            justify-content: center;

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

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

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

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

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

          .news-datebar-archive-link{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
            width: 100%;

            text-decoration: none;
            color: inherit;
          }

          .news-datebar--archive{
            margin-left: 0;
            justify-content: center;
            gap: 0;
            cursor: pointer;
          }          


/* =========================================================
   5) CARD / TYPO
========================================================= */

          .news-card{
            position: relative;

            margin-left: 26px;
            padding: 1rem;

            border: 1px solid rgba(255,255,255,0.14);
            border-radius: var(--radius-sm);
            background: var(--color-box-bg);

            box-shadow: 0 10px 26px rgba(0,0,0,0.25);
          }

          .news-card::after{
            content: "";
            display: block;
            clear: both;
          }

          .news-meta-row{
            display: flex;
            align-items: center;
            gap: 0.5rem;

            margin-bottom: 0.35rem;
          }

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

          .news-headline{
            margin: 0 0 calc(var(--menu-gap) * 1.5) 0;

            font-family: var(--font-style-headline);
            font-size: calc(var(--font-size-content) * 1.7);
            line-height: 1.3;
            font-weight: 700;
            letter-spacing: 0.01em;
            color: #fff;
          }

          .news-headline + .news-text{
            margin-top: calc(var(--menu-gap) * 0.4);
          }

          .news-text{
            margin: 0;

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

          .news-text + .news-text{
            margin-top: 0.8rem;
          }

          .news-text.center{
            max-width: 55ch;
            margin: calc(var(--menu-gap) * 0.6) auto;

            text-align: center;
            font-size: calc(var(--font-size-content) * 1.05);
            font-weight: 500;
          }


/* =========================================================
   6) LISTEN / LINKS
========================================================= */

          .news-list-inner{
            list-style: none;
            margin: 0.55rem 0 0 0;
            padding: 0;
          }

          .news-list-inner li{
            position: relative;
            margin-bottom: 0.3rem;
            padding-left: 18px;
          }

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

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

          .news-list-inner li:last-child{
            margin-bottom: 0;
          }

          .news-links{
            margin-top: 0.6rem;
          }

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


/* =========================================================
   7) HIGHLIGHT BOXEN
========================================================= */

          .news-highlight{
            max-width: 560px;
            margin: calc(var(--menu-gap) * 1) auto;
            padding: calc(var(--menu-gap) * 0.9) calc(var(--menu-gap) * 1);

            text-align: center;

            border: 1px solid rgba(255,255,255,0.18);
            border-radius: var(--radius-sm);
            background: rgba(255,255,255,0.05);

            box-shadow:
              0 10px 26px rgba(0,0,0,0.25),
              inset 0 0 0 1px rgba(255,255,255,0.04);
          }

          .news-highlight-text{
            margin: 0 0 0.4rem 0;

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

          .news-highlight-sub{
            margin: 0;

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

          .news-highlight-badge{
            display: inline-block;
            margin-bottom: 0.4rem;

            font-family: var(--font-style-ui);
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.7);
          }

          .news-highlight--birthday{
            position: relative;
            overflow: hidden;

            max-width: 560px;
            margin: calc(var(--menu-gap) * 1.2) auto;
            padding: calc(var(--menu-gap) * 1) calc(var(--menu-gap) * 1.1);

            text-align: center;

            border: 1px solid rgba(255,120,120,0.28);
            border-radius: var(--radius-sm);

            background:
              radial-gradient(
                circle at 50% -20%,
                rgba(255,80,80,0.42),
                transparent 99%
              ),
              linear-gradient(
                to bottom,
                rgba(255,120,120,0.08),
                rgba(10,8,50,0.45)
              );

            box-shadow:
              0 16px 36px rgba(0,0,0,0.35),
              0 0 28px rgba(255,80,80,0.18),
              inset 0 0 0 1px rgba(255,255,255,0.05);
          }

          .news-highlight--birthday::before{
            content: "";
            position: absolute;
            inset: -30% -20% auto -20%;
            height: 120%;

            background:
              radial-gradient(
                ellipse at center,
                rgba(255,215,120,0.12),
                transparent 70%
              );

            pointer-events: none;
          }

/* =========================================================
   8) NEWS – SHOP CTA BOX
========================================================= */

        .news-shop-box{
          max-width: 470px;
          margin: calc(var(--menu-gap) * 1.2) auto 0 auto;

          padding: calc(var(--menu-gap) * 0.8) calc(var(--menu-gap) * 1);

          text-align: center;

          border: 1px solid rgba(255,255,255,0.18);
          border-radius: var(--radius-sm);

          background: var(--color-highlight-section-bg);

          box-shadow:
            inset 0 0 0 1px rgba(255,255,255,0.04);
        }    

        .news-shop-text{
          margin: 0 0 0.6rem 0;

          font-size: var(--font-size-content);
          line-height: var(--line-height-text);

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

        /* Button */

        .news-shop-button{
          display: inline-flex;
          align-items: center;
          justify-content: center;

          padding: 0.45rem 1rem;

          border: 1px solid rgba(255,255,255,0.18);
          border-radius: var(--radius-sm);

          background: rgba(255,255,255,0.08);

          font-family: var(--font-style-ui);
          font-size: 0.75rem;
          font-weight: 700;
          letter-spacing: 0.05em;
          text-transform: uppercase;

          color: #fff;
          text-decoration: none;

          transition: all 0.25s ease;
        }

        .news-shop-button:hover{
          border-color: rgba(180,190,255,0.55);

          box-shadow:
            0 16px 36px rgba(0,0,0,0.45);
        }           


/* =========================================================
   9) BILDER
========================================================= */

          .news-image{
            width: 100%;
            max-width: 320px;
            box-sizing: border-box;

            margin: calc(var(--menu-gap) * 1.1) auto 1rem auto;
            padding: 8px;

            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.18);
            border-radius: var(--radius-sm);

            box-shadow: 0 10px 26px rgba(0,0,0,0.25);
          }

          .news-image img{
            display: block;
            width: 100%;
            height: auto;

            border-radius: calc(var(--radius-sm) * 0.6);
          }

          .news-image figcaption{
            margin-top: 6px;

            font-family: var(--font-style-text);
            font-size: 0.82rem;
            line-height: 1.35;
            color: rgba(255,255,255,0.80);
          }

          .news-image.right{
            float: right;
            margin: 0.2rem 0 0.9rem 1rem;
          }

          .news-image.left{
            float: left;
            margin: 0.2rem 1rem 0.9rem 0;
          }

          .news-image.center{
            float: none;
            margin: calc(var(--menu-gap) * 1.1) auto 1rem auto;
            text-align: center;
          }


/* =========================================================
   10) NEWS – MIDDLE
========================================================= */

          .news-middle{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: calc(var(--menu-gap) * 1);

            margin: calc(var(--menu-gap) * 1.2) 0;
          }

          .news-middle .news-image{
            margin: 0;
            max-width: none;
          }

          .news-middle .news-image figcaption{
            margin-top: 8px;
            margin-left: auto;
            margin-right: auto;
            max-width: 28ch;

            text-align: center;
          }

          .news-middle--group{
            position: relative;

            padding: calc(var(--menu-gap) * 0.8);

            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.18);
            border-radius: var(--radius-sm);

            box-shadow: 0 10px 26px rgba(0,0,0,0.25);
          }

          .news-middle--group .news-image{
            background: none;
            border: none;
            box-shadow: none;
            padding: 0;
          }

          .news-middle--group::before{
            content: "";
            position: absolute;

            top: 12px;
            bottom: 12px;
            left: 50%;

            width: 1px;
            background: rgba(255,255,255,0.45);
          }


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

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


/* =========================================================
   12) ARCHIV-BOX / SELECT
========================================================= */

          .news-archive-box{
            max-width: 680px;
            margin: calc(var(--menu-gap) * 1.8) auto 0 auto;
            padding: calc(var(--menu-gap) * 1) calc(var(--menu-gap) * 1.1);

            text-align: center;

            border: 1px solid rgba(255,255,255,0.16);
            border-radius: var(--radius-sm);
            background: rgba(255,255,255,0.04);

            box-shadow:
              0 10px 26px rgba(0,0,0,0.20),
              inset 0 0 0 1px rgba(255,255,255,0.03);
          }

          .news-archive-title{
            margin: 0 0 0.45rem 0;

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

          .news-archive-text{
            margin: 0 0 calc(var(--menu-gap) * 0.8) 0;

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

          .news-archive-select-wrap{
            display: flex;
            justify-content: center;
          }

          .news-archive-select{
            width: 100%;
            max-width: 340px;

            padding: 0.72rem 0.95rem;

            font-family: var(--font-style-ui);
            font-size: var(--font-size-content);
            line-height: 1.2;
            color: #fff;

            border: 1px solid rgba(255,255,255,0.22);
            border-radius: var(--radius-sm);
            background: rgba(10,8,50,0.42);

            outline: none;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;

            cursor: pointer;
          }

          .news-archive-select:focus{
            border-color: rgba(180,190,255,0.45);
            box-shadow: 0 0 0 2px rgba(180,190,255,0.12);
          }

          .visually-hidden{
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
          }


/* =========================================================
   13) ARCHIV-BAR
========================================================= */

          .news-entry--archive{
            margin-top: calc(var(--menu-gap) * 2.5);
          }

          .news-datebar--archive{
            margin-left: 0;

            justify-content: space-between;
            align-items: center;

            cursor: default;
          }

          .news-datebar--archive .news-datebar-day,
          .news-datebar--archive .news-datebar-clock{
            font-weight: 700;
          }

          .news-archive-cta{
            display: inline-flex;
            align-items: center;
            justify-content: center;

            min-height: 37px;
            padding: 0 0.9rem;

            border: 1px solid rgba(255,255,255,0.18);
            border-radius: var(--radius-sm);

            background: var(--color-highlight-section-bg);

            box-shadow:
              inset 0 0 0 1px rgba(255,255,255,0.04);

            font-family: var(--font-style-ui);
            font-size: calc(var(--font-size-content) * 0.85);
            line-height: 1;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
          }

            .news-archive-cta:hover{
              border-color: rgba(180,190,255,0.55);

              box-shadow:
                0 16px 36px rgba(0,0,0,0.45);
            }      


/* =========================================================
   14) RESPONSIVE
========================================================= */

@media (max-width: 700px){

          .news-entry{
            margin-bottom: calc(var(--menu-gap) * 1.15);
            padding-bottom: calc(var(--menu-gap) * 1.0);
          }

          .news-datebar{
            gap: 0.45rem;
            padding: 0.7rem 0.8rem;
          }

          .news-card{
            margin-left: 1px;
          }

          .news-datebar-time{
            flex-wrap: wrap;
          }

          .news-tag{
            margin-left: 0;
          }

          .news-text{
            text-align: justify;
            text-justify: inter-word;

            hyphens: auto;
            -webkit-hyphens: auto;
            word-break: normal;
          }

          .news-meta-row{
            flex-wrap: wrap;
            gap: 0.4rem;
          }

          .news-image,
          .news-image.right,
          .news-image.left,
          .news-image.center{
            float: none;
            width: 100%;
            max-width: 320px;

            margin: calc(var(--menu-gap) * 1) auto;
            text-align: center;
          }

          .news-middle{
            grid-template-columns: 1fr;
            gap: calc(var(--menu-gap) * 0.8);
          }

          .news-middle--group::before{
            display: none;
          }

          .news-stack{
            gap: calc(var(--menu-gap) * 0.55);
          }

          .news-intro-bar{
            flex-direction: column;
            align-items: stretch;
          }

          .news-archive-link a{
            width: 100%;
            justify-content: center;
          }  

}