/* =========================================================
   FOTO-GALERIE
   Datei: content-fotogalerie.css
========================================================= */


/* =========================================================
   1) HINWEISBOX
========================================================= */

          .page-notice{
            max-width: 620px;
            margin: 0 auto calc(var(--menu-gap) * 1.3) auto;
            padding: 0.6rem 0.9rem;

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

            background: rgba(180,190,255,0.07);
            backdrop-filter: blur(6px);

            text-align: center;

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

          .page-notice-text{
            margin: 0;

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

          .page-notice strong{
            color: #fff;
          }


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

          .gallery-intro{
            max-width: 760px;
            margin: 0 auto calc(var(--menu-gap) * 1.3) auto;

            text-align: center;
          }

          .gallery-intro-text{
            margin: 0;

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


/* =========================================================
   3) ABSCHNITTE
========================================================= */

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

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

          .gallery-title{
            margin: 0 0 calc(var(--menu-gap) * 0.9) 0;

            font-family: var(--font-style-headline);
            font-size: calc(var(--font-size-headline-section) * 0.95);
            line-height: var(--line-height-headline-md);
            color: #fff;
          }


/* =========================================================
   4) ÜBERSICHTSGRID
========================================================= */

          .gallery-overview-grid{
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: calc(var(--menu-gap) * 0.9);
          }


/* =========================================================
   5) ÜBERSICHTSKARTEN
========================================================= */

          .gallery-overview-card{
            border: 1px solid rgba(255,255,255,0.18);
            border-radius: var(--radius-sm);
            background: var(--color-highlight-section-bg);

            box-shadow:
              0 10px 24px rgba(0,0,0,0.22),
              inset 0 0 0 1px rgba(255,255,255,0.03);

            overflow: hidden;
            will-change: transform;

            transition:
              transform 0.18s ease,
              box-shadow 0.18s ease,
              border-color 0.18s ease,
              background 0.18s ease;
          }

          .gallery-overview-card:hover{
            background: var(--color-highlight-section-bg-hover);
            transform: translateY(-2px);
            border-color: rgba(180,190,255,0.38);

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

          .gallery-overview-link{
            display: flex;
            flex-direction: column;
            height: 100%;

            color: inherit;
            text-decoration: none;
          }

          .gallery-overview-media{
            position: relative;
            overflow: hidden;

            background: rgba(0,0,0,0.18);
          }

          .gallery-overview-media img{
            display: block;
            width: 100%;
            aspect-ratio: 4 / 3;
            object-fit: cover;

            transition: transform 0.28s ease;
          }

          .gallery-overview-card:hover .gallery-overview-media img{
            transform: scale(1.015);
          }

          .gallery-overview-content{
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            gap: 0.25rem;

            padding: 0.8rem 0.9rem 0.95rem 0.9rem;
          }

          .gallery-overview-content .gallery-overview-title{
            margin: 0 0 0.2rem 0;

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

          .gallery-overview-content .gallery-overview-meta{
            margin: 0;

            font-size: calc(var(--font-size-content) * 0.84);
            line-height: 1.4;
            color: rgba(255,255,255,0.82);
          }

          .gallery-overview-content .gallery-overview-count{
            margin: auto 0 0 0;

            font-size: calc(var(--font-size-content) * 0.78);
            line-height: 1.3;
            color: rgba(255,255,255,0.68);
          }

          .gallery-overview-link:active{
            transform: scale(0.995);
          }


/* =========================================================
   6) BILDERGRID / EINZELGALERIE
========================================================= */

          .gallery-grid{
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: calc(var(--menu-gap) * 0.9);
          }

          .gallery-card{
            margin: 0;
            padding: 8px;

            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 24px rgba(0,0,0,0.22),
              inset 0 0 0 1px rgba(255,255,255,0.03);

            transition:
              transform 0.18s ease,
              box-shadow 0.18s ease,
              border-color 0.18s ease;
          }

          .gallery-card:hover{
            transform: translateY(-2px);
            border-color: rgba(180,190,255,0.38);

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

          .gallery-card img{
            display: block;
            width: 100%;
            aspect-ratio: 4 / 3;
            object-fit: cover;

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

          .gallery-card figcaption{
            margin-top: 0.45rem;

            text-align: center;
            font-size: calc(var(--font-size-content) * 0.82);
            line-height: 1.35;
            color: rgba(255,255,255,0.82);
          }


/* =========================================================
   7) RESPONSIVE
========================================================= */

@media (max-width: 900px){

          .gallery-overview-grid,
          .gallery-grid{
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }

}

@media (max-width: 700px){

          .gallery-overview-grid,
          .gallery-grid{
            grid-template-columns: 1fr;
          }

          .gallery-overview-content{
            padding: 0.8rem 0.85rem 0.9rem 0.85rem;
          }

}