/* =========================================================
   SEITENINFORMATIONEN
   Datei: content-seiteninformationen.css
========================================================= */

          /* Intro */
          .seiteninfo-intro{
            margin: 0 0 calc(var(--menu-gap) * 1.1) 0;
            color: rgba(255,255,255,0.85);
            font-size: var(--font-size-content);
            line-height: var(--line-height-text);
          }

          .muted{
            color: rgba(255,255,255,0.72);
          }


/* =========================================================
   WRAP (Innenbreite wie Breadcrumb)
========================================================= */

          .seiteninfo-wrap{
            max-width: 980px;
            margin: 0 auto;
            box-sizing: border-box;
          }


/* =========================================================
   GRID
========================================================= */

          .seiteninfo-grid{
            display: grid;
            grid-template-columns: 1fr;
            gap: calc(var(--menu-gap) * 1.2);
            margin-top: calc(var(--menu-gap) * 0.8);
          }

          /* Tablet/Desktop: 2 Spalten */
@media (min-width: 760px){

          .seiteninfo-grid{
            grid-template-columns: repeat(2, minmax(0, 1fr));
            column-gap: calc(var(--menu-gap) * 1.4);
            row-gap: calc(var(--menu-gap) * 1.2);
          }
}

          /* volle Breite */
          .seiteninfo-wide{
            grid-column: 1 / -1;
          }


/* =========================================================
   SECTION Box + Hover (ohne translate)
========================================================= */

          .seiteninfo-section{
            padding: calc(var(--menu-gap) * 1.05);
            border: 1px solid var(--color-box-border, rgba(255,255,255,0.28));
            border-radius: var(--radius-sm);
            background: var(--color-box-bg, rgba(0,0,0,0.14));
            transition: background 0.2s ease, border-color 0.2s ease;
          }

          .seiteninfo-section:hover{
            background: var(--color-box-bg-strong, rgba(0,0,0,0.22));
            border-color: var(--color-box-border-strong, rgba(255,255,255,0.36));
          }

          /* Titel */
          .seiteninfo-title{
            margin: 0 0 calc(var(--menu-gap) * 0.6) 0;
            font-family: var(--font-style-headline);
            font-size: calc(var(--font-size-headline-section) * 0.9);
            color: #fff;
          }

          /* Subtitle */
          .seiteninfo-subtitle{
            margin: calc(var(--menu-gap) * 0.95) 0 calc(var(--menu-gap) * 0.45) 0;
            font-family: var(--font-style-headline);
            font-size: calc(var(--font-size-headline-minor) * 1.05);
            color: #fff;
          }

          /* Text/Note */
          .seiteninfo-note{
            margin: 0 0 calc(var(--menu-gap) * 0.9) 0;
            font-size: var(--font-size-content);
            line-height: var(--line-height-text);
          }

          /* Listen */
          .seiteninfo-list{
            margin: 0;
            padding-left: 1.1rem;
            display: grid;
            gap: 0.45rem;
            color: rgba(255,255,255,0.92);
            font-size: var(--font-size-content);
            line-height: var(--line-height-text);
          }


/* =========================================================
   Stack links (Technik / Partner / Danksagungen)
========================================================= */

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

          /* Tablet/Desktop: Stack links, Stats rechts */
@media (min-width: 760px){

          .seiteninfo-stack{
            grid-column: 1;
          }

          .seiteninfo-statswide{
            grid-column: 2;
          }
}


/* =========================================================
   LINKS – Unterstrich aus der Mitte (nur innerhalb Seiteninfo)
========================================================= */

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

          .seiteninfo-wrap 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;
          }

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

          .seiteninfo-wrap a:hover::after{
            width: 100%;
            left: 0;
          }


/* =========================================================
   EXTERNE LINKS – Icon nur bei .extlink (kein globales target=_blank!)
========================================================= */

          .extlink{
            position: relative;
            display: inline-block;
            padding-right: 1.35em; /* Platz für Icon rechts */
          }

          /* Icon rechts – nur wenn target="_blank" */
          .extlink[target="_blank"]::before{
            content: "⧉"; /* alternativ: "↗" */
            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;
          }

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


/* =========================================================
   Statistik
========================================================= */

          .seiteninfo-statslist{
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 0.35rem;
          }

          .seiteninfo-statslist li{
            display: flex;
            justify-content: space-between;
            gap: 12px;
            padding: 0.35rem 0.25rem;
            border-bottom: 1px solid rgba(255,255,255,0.12);
            font-family: var(--font-style-text);
            font-size: var(--font-size-content);
            color: rgba(255,255,255,0.92);
          }

          .seiteninfo-statslist li:last-child{
            border-bottom: none;
          }

          .seiteninfo-statslist li span:first-child{
            font-weight: 900;
            color: rgba(255,255,255,0.88);
          }


/* =========================================================
   Unterstützung / Personen (immer untereinander)
========================================================= */

          .support-list{
            display: grid;
            grid-template-columns: 1fr;
            gap: calc(var(--menu-gap) * 0.9);
            margin-top: calc(var(--menu-gap) * 0.85);
          }

          .support-group{
            padding: calc(var(--menu-gap) * 0.75);
            border: 1px solid rgba(255,255,255,0.18);
            border-radius: var(--radius-sm);
            background: rgba(0,0,0,0.12);
          }

          .support-title{
            margin: 0 0 0.5rem 0;
            font-family: var(--font-style-ui);
            font-size: calc(var(--font-size-content) * 0.95);
            font-weight: 900;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #fff;
          }

          .support-names{
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            gap: 0.35rem;
          }

          .support-names li{
            position: relative;
            padding-left: 1rem;
            color: rgba(255,255,255,0.9);
            line-height: 1.35;
          }

          .support-names li::before{
            content: "–";
            position: absolute;
            left: 0;
            color: rgba(255,255,255,0.55);
          }


/* =========================================================
   Screenshot Grid – 3 Spalten Desktop/Tablet
========================================================= */

          .seiteninfo-designgrid.designgrid--3{
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1.5rem;
          }

          /* Mobile – 1 untereinander */
@media (max-width: 640px){

          .seiteninfo-designgrid.designgrid--3{
            grid-template-columns: 1fr;
            gap: 16px;
          }
}

          /* Screenshot-Kachel */
          .seiteninfo-shot{
            margin: 0;
            border: 1px solid rgba(255,255,255,0.18);
            border-radius: calc(var(--radius-sm) - 2px);
            overflow: hidden;
            background: rgba(255,255,255,0.04);
          }

          .seiteninfo-shot img{
            width: 100%;
            height: auto;
            display: block;
          }

          /* Optional: ruhigeres Layout mit gleichen Bildhöhen */
          .seiteninfo-shot img{
            aspect-ratio: 16 / 9;
            object-fit: cover;
          }

          .seiteninfo-shot figcaption{
            padding: 8px 10px;
            font-size: calc(var(--font-size-content) * 0.88);
            color: rgba(255,255,255,0.82);
          }

          /* Design-Item = immer untereinander */
          .design-item{
            margin: 0;
            padding: calc(var(--menu-gap) * 0.8) 0;
            border-bottom: 1px solid rgba(255,255,255,0.14);
            display: grid;
            gap: 0.35rem;
          }

          .design-item:last-child{
            border-bottom: none;
          }


/* =========================================================
   Design-Meta unter Screenshots
========================================================= */

          /* Wrapper unter dem Bild */
          .design-meta{
            padding: 10px 12px;
            display: grid;
            gap: 6px;
          }

          /* alle direkten Kinder: KEINE Extra-Abstände */
          .design-meta > *{
            margin: 0;
          }

          /* Zeile 1: Titel */
          .design-name{
            font-family: var(--font-style-text);
            font-size: calc(var(--font-size-content) * 0.88);
            font-weight: 400;
            color: var(--color-font-primary);
            opacity: 0.85;
            line-height: 1.3;
          }

          /* Zeile 2: Zeitraum */
          .design-range{
            font-family: var(--font-style-text);
            font-size: calc(var(--font-size-content) * 0.88);
            font-weight: 400;
            color: var(--color-font-primary);
            opacity: 0.85;
            line-height: 1.3;
          }

          /* Zeile 3: Zusatzinfo */
          .design-note{
            font-family: var(--font-style-text);
            font-size: calc(var(--font-size-content) * 0.88);
            font-weight: 400;
            color: var(--color-font-primary);
            opacity: 0.7;
            line-height: 1.3;
          }

          /* Zusatzinfo ausblenden, wenn leer */
          .design-note:empty{
            display: none;
          }