/* =========================================================
   FANSEITEN
   Datei: content-fanseiten.css
========================================================= */


/* =========================================================
   CONTENT – kleine Typo-Ergänzungen (seitenbezogen)
========================================================= */

          .content p{
            max-width: 65ch;
          }

          .content ul,
          .content ol{
            padding-left: 1.25rem;
          }

          .content li{
            margin-bottom: 0.5rem;
          }


/* =========================================================
   FANSEITEN – BOXEN (Fanseiten / Offizielle Seiten)
========================================================= */

          .link-section{
            margin-top: calc(var(--menu-gap) * 1.25);
            padding: calc(var(--menu-gap) * 0.9);
            background: var(--color-content-box-bg);
            border: 1px solid var(--color-content-box-border);
            border-radius: var(--radius-sm);
          }

          .link-section--official{
            background: var(--color-content-box-bg-strong);
            border-color: var(--color-content-box-border-strong);
          }

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


/* =========================================================
   LINK-LISTE – sauber & einheitlich
========================================================= */

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

          .link-list li{
            margin-bottom: calc(var(--menu-gap) / 1.5);
            font-family: var(--font-style-text);
            color: rgba(255,255,255,0.9);
          }

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

          .link-list strong{
            display: block;
            font-weight: 600;
            margin-bottom: 0.2rem;
            color: #fff;
          }

          .link-list a{
            color: var(--color-link);
            text-decoration: none;
            position: relative;
            overflow-wrap: anywhere;
          }

          .link-list 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;
          }

          .link-list a:hover{
            color: var(--color-link-hover);
          }

          .link-list a:hover::after{
            width: 100%;
            left: 0;
          }


/* =========================================================
   EXTERNE LINKS – Icon für target="_blank"
========================================================= */

          .content a[target="_blank"]{
            position: relative;
            padding-right: 1.35em;
          }

          .content a[target="_blank"]::before{
            content: "⧉";
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-55%);
            font-size: 0.85em;
            line-height: 1;
            opacity: 0.75;
            pointer-events: none;
            transition: opacity 0.2s ease, transform 0.2s ease;
          }

          .content a[target="_blank"]:hover::before{
            opacity: 1;
            transform: translateY(-55%) translate(2px, -2px);
          }


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px){

          .link-section{
            padding: calc(var(--menu-gap) * 0.85);
          }
}

@media (max-width: 480px){

          .link-section{
            padding: calc(var(--menu-gap) * 0.75);
          }

          .section-title{
            font-size: calc(var(--font-size-headline-sub) * 0.95);
          }
}