/* =========================================================
   WEGBEGLEITER
   Datei: content-wegbegleiter.css
========================================================= */


/* =========================================================
   1) BASIS
========================================================= */

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


          .wegbegleiter-wrap p{
            margin: 0 0 1rem 0;

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


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


          .wegbegleiter-wrap a::after{
            content: "";
            position: absolute;
            left: 50%;
            bottom: -2px;
            width: 0;
            height: 1.5px;
            background: currentColor;
            transition: width .25s ease, left .25s ease;
          }


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


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


/* =========================================================
   2) EINLEITUNG
========================================================= */

          .wegbegleiter-intro{
            margin-bottom: calc(var(--menu-gap) * 1.2);

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


/* =========================================================
   3) SEKTIONEN
========================================================= */

          .wegbegleiter-section{
            margin-top: calc(var(--menu-gap) * 1.1);
            padding: calc(var(--menu-gap) * 1.05);

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

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


          .wegbegleiter-section:hover{
            background: var(--color-box-bg-strong);
            border-color: var(--color-box-border-strong);
          }


          .wegbegleiter-title{
            margin: 0 0 14px 0;

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


/* =========================================================
   4) TEASER GRID
========================================================= */

          .wegbegleiter-teaser-grid{
            display: grid;
            grid-template-columns: repeat(2, minmax(0,1fr));
            gap: calc(var(--menu-gap) * 1);
            align-items: stretch;
          }


/* =========================================================
   5) TEASER CARD
========================================================= */

          .wegbegleiter-teaser{
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;

            text-align: center;

            padding: 1.2rem;

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

            transition:
              background .2s ease,
              border-color .2s ease,
              transform .18s ease,
              box-shadow .18s ease;
          }


          .wegbegleiter-teaser:hover{
            transform: translateY(-2px);
            background: rgba(255,255,255,0.06);
            border-color: rgba(255,255,255,0.24);
            box-shadow: 0 10px 24px rgba(0,0,0,0.20);
          }


          .wegbegleiter-teaser--memory{
            border-color: rgba(180,190,255,0.22);
            background: rgba(255,255,255,0.05);
          }


          .wegbegleiter-teaser--memory:hover{
            border-color: rgba(180,190,255,0.34);
          }


/* =========================================================
   6) WEGBEGLEITER – TEASER IMAGE
========================================================= */

          .wegbegleiter-teaser-image{
            width: 100%;
            max-width: 180px;
            height: 260px;

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

            margin: 0 auto 1rem auto;
            overflow: hidden;

            border: 1px solid rgba(255,255,255,0.14);
            border-radius: var(--radius-sm);
            background: rgba(255,255,255,0.03);
          }


          .wegbegleiter-teaser-image img{
            display: block;

            width: 100%;
            height: 100%;

            object-fit: cover;
            object-position: center top;

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

          .wegbegleiter-photo--lower{
            object-position: center 30%;
          }

          .wegbegleiter-photo--left{
            object-position: 35% top;
          }

          .wegbegleiter-photo--right{
            object-position: 65% top;
          }          


/* =========================================================
   7) TEASER CONTENT
========================================================= */

          .wegbegleiter-teaser-content{
            width: 100%;
            max-width: 420px;

            display: flex;
            flex-direction: column;
            align-items: center;
            flex-grow: 1;
          }


          .wegbegleiter-teaser-title{
            margin: 0 0 0.4rem 0;

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


          .wegbegleiter-teaser-role{
            margin-bottom: 0.9rem !important;

            font-family: var(--font-style-ui);
            font-size: calc(var(--font-size-content) * 0.9);
            letter-spacing: 0.03em;

            color: rgba(180,190,255,0.92);
          }


          .wegbegleiter-teaser-meta{
            margin: 0.4rem 0 0.8rem 0;

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

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


          .wegbegleiter-teaser-content p{
            text-align: center;
          }


/* =========================================================
   8) BUTTON / LINK
========================================================= */

          .wegbegleiter-link{
            display: inline-flex;
            align-items: center;
            justify-content: center;

            margin-top: auto;
            padding: 0.55rem 0.9rem;
            border-radius: var(--radius-sm);

            font-family: var(--font-style-ui);
            font-size: calc(var(--font-size-content) * 0.9);
            font-weight: 800;
            letter-spacing: 0.03em;
            text-decoration: none;

            color: #fff;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.14);

            transition:
              background .2s ease,
              border-color .2s ease,
              transform .15s ease,
              box-shadow .15s ease;
          }


          .wegbegleiter-link:hover{
            background: rgba(255,255,255,0.10);
            border-color: rgba(255,255,255,0.24);
            transform: translateY(-1px);
            box-shadow: 0 8px 18px rgba(0,0,0,0.18);
          }


          .wegbegleiter-link:active{
            transform: translateY(0);
          }


/* =========================================================
   9) KOMPAKTE LISTE
========================================================= */

          .wegbegleiter-list{
            margin-top: calc(var(--menu-gap) * 1.2);

            display: grid;
            gap: calc(var(--menu-gap) * 0.7);
          }


/* =========================================================
   10) KOMPAKTE ITEMS
========================================================= */

          .wegbegleiter-item{
            display: grid;
            grid-template-columns: 80px 1fr 1.4fr;
            gap: calc(var(--menu-gap) * 0.9);
            align-items: start;

            padding: 0.8rem 0.95rem;

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

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


          .wegbegleiter-item:hover{
            background: var(--color-box-bg-strong);
            border-color: var(--color-box-border-strong);
          }


/* =========================================================
   11) ITEM BILD
========================================================= */

          .wegbegleiter-item img{
            width: 80px;
            height: 80px;

            object-fit: cover;
            border-radius: var(--radius-sm);

            flex-shrink: 0;
          }


/* =========================================================
   12) ITEM INFOS
========================================================= */

          .wegbegleiter-item-main{
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
            align-self: start;
          }


          .wegbegleiter-item-name{
            position: relative;
            margin: 0;

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


          .wegbegleiter-item-name::after{
            content: "";
            display: block;

            margin-top: 6px;
            height: 2px;

            background: linear-gradient(
              to right,
              rgba(255,255,255,0.6),
              transparent
            );
          }


          .wegbegleiter-item-role{
            margin: 0;

            font-size: calc(var(--font-size-content) * 0.95);
            font-weight: 600;

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


          .wegbegleiter-item-meta{
            margin: 0.35rem 0 0 0;

            font-size: calc(var(--font-size-content) * 0.85);
            color: rgba(255,255,255,0.70);
          }


/* =========================================================
   13) ITEM BESCHREIBUNG
========================================================= */

          .wegbegleiter-item-desc{
            align-self: start;

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

            border-left: 1px solid rgba(255,255,255,0.15);
            padding-left: 1rem;
          }


/* =========================================================
   14) ABSTÄNDE / SCROLLMARGIN
========================================================= */

          .wegbegleiter-section + .wegbegleiter-section{
            scroll-margin-top: 90px;
          }


/* =========================================================
   15) RESPONSIVE – 900px
========================================================= */

@media (max-width: 900px){

          .wegbegleiter-teaser-grid{
            grid-template-columns: 1fr;
          }

          .wegbegleiter-item{
            grid-template-columns: 80px 1fr;
          }

          .wegbegleiter-item-desc{
            grid-column: 1 / -1;
            margin-top: 0.5rem;
            padding-left: 0;
            border-left: none;
          }

}


/* =========================================================
   16) RESPONSIVE – 768px
========================================================= */

@media (max-width: 768px){

          .wegbegleiter-section{
            padding: calc(var(--menu-gap) * 0.9);
          }

          .wegbegleiter-intro{
            margin-bottom: calc(var(--menu-gap) * 1);
          }

          .wegbegleiter-teaser{
            padding: 1rem;
          }

          .wegbegleiter-teaser-image{
            max-width: 163px;
            height: 240px;
          }

          .wegbegleiter-teaser-image img{
            max-height: 240px;
          }

          .wegbegleiter-teaser-content{
            max-width: 100%;
          }

          .wegbegleiter-item{
            grid-template-columns: 70px 1fr;
            gap: 0.8rem;
          }

          .wegbegleiter-item img{
            width: 70px;
            height: 70px;
          }

}


/* =========================================================
   17) RESPONSIVE – 480px
========================================================= */

@media (max-width: 480px){

          .wegbegleiter-teaser-image{
            max-width: 142px;
            height: 210px;
          }

          .wegbegleiter-teaser-image img{
            max-height: 210px;
          }

          .wegbegleiter-teaser-title{
            font-size: calc(var(--font-size-headline-minor) * 1);
          }

          .wegbegleiter-item{
            grid-template-columns: 1fr;
          }

          .wegbegleiter-item img{
            width: 84px;
            height: 84px;
          }

          .wegbegleiter-item-main{
            width: 100%;
          }

}