/* =========================================================
   AUTOGRAMME
   Datei: content-autogramme.css
========================================================= */


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

          .autogramme-page{
            max-width: 980px;
            margin: 0 auto;
          }


          .autogramme-page 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);
          }


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


/* =========================================================
   2) BOX BASIS
========================================================= */

          .autogramme-intro-box,
          .autogramme-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;
          }


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


          .autogramme-card,
          .autogramme-address,
          .autogramme-list li,
          .autogramme-item{
            border-radius: var(--radius-sm);
            border: 1px solid rgba(255,255,255,0.14);
            background: rgba(255,255,255,0.04);
          }


/* =========================================================
   3) EINLEITUNG
========================================================= */

          .autogramme-intro{
            margin-bottom: 0.9rem;
          }


/* =========================================================
   4) SEKTIONSTITEL
========================================================= */

          .autogramme-title{
            margin: 0 0 16px 0;

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


          .autogramme-subtitle{
            margin: 0 0 16px 0;
            padding-bottom: 10px;

            position: relative;

            text-align: center;
            font-family: var(--font-style-headline);
            font-size: calc(var(--font-size-content) * 1.2);
            font-weight: 700;
            color: #fff;
          }


          .autogramme-subtitle::after{
            content: "";
            position: absolute;

            left: 50%;
            bottom: 0;

            width: 65%;
            height: 1px;

            transform: translateX(-50%);

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


          .autogramme-tour{
            margin-bottom: 1rem;

            font-family: var(--font-style-ui);
            font-size: calc(var(--font-size-content) * 0.92);
            color: rgba(180,190,255,0.92);
            letter-spacing: 0.03em;
          }


/* =========================================================
   5) AUTOGRAMM BESTELLEN
========================================================= */

          .autogramme-order{
            --order-section-bg: var(--color-highlight-section-bg);
            --order-section-border: var(--color-box-border);

            --order-card-bg: rgba(255,255,255,0.035);
            --order-card-border: rgba(255,255,255,0.14);
            --order-card-border-hover: rgba(180,190,255,0.32);

            --order-address-bg: rgba(255,255,255,0.045);
            --order-address-border: rgba(180,190,255,0.74);

            --order-list-bg: rgba(255,255,255,0.05);
            --order-list-border: rgba(255,255,255,0.14);
          }


          .autogramme-section--order{
            background: var(--order-section-bg);
            border-color: var(--order-section-border);
          }


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


          .autogramme-card{
            display: flex;
            flex-direction: column;
            height: 100%;
            padding: 1rem;

            text-align: center;

            background: var(--order-card-bg);
            border: 1px solid var(--order-card-border);

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


          .autogramme-order .autogramme-card:hover{
            background: var(--color-highlight-section-bg);
            border-color: var(--order-card-border-hover);
            box-shadow: 0 10px 24px rgba(0,0,0,0.30);
          }


          .autogramme-card--de{
            --order-card-bg: rgba(255,255,255,0.035);
            --order-card-border: rgba(255,255,255,0.14);
            --order-address-bg: var(--order-section-bg);
            --order-address-border: rgba(180,190,255,0.74);
            --order-list-bg: rgba(255,255,255,0.05);
            --order-list-border: rgba(255,255,255,0.14);
          }


          .autogramme-card--ch{
            --order-card-bg: rgba(255,255,255,0.03);
            --order-card-border: rgba(255,255,255,0.14);
            --order-address-bg: var(--order-section-bg);
            --order-address-border: rgba(180,190,255,0.74);
            --order-list-bg: rgba(255,255,255,0.05);
            --order-list-border: rgba(255,255,255,0.14);
          }


          .autogramme-text{
            min-height: 110px;
            margin-bottom: 1rem;

            text-align: center;
          }


          .autogramme-address{
            margin: 0 0 1rem 0;
            padding: 1rem 1.1rem;

            text-align: center;

            background: var(--order-address-bg);
            border: 1px solid rgba(255,255,255,0.12);
            border-left: 4px solid var(--order-address-border);
            border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
          }


          .autogramme-address p{
            margin: 0;
            line-height: 1.6;
          }


          .autogramme-note{
            margin-bottom: 0.8rem;

            text-align: center;
            font-weight: 600;
            color: rgba(255,255,255,0.96);
            opacity: 0.85;
          }


          .autogramme-list{
            margin: 0;
            padding: 0;
            list-style: none;

            display: grid;
            gap: 0.75rem;
          }


          .autogramme-list li{
            position: relative;
            padding: 0.85rem 1rem 0.85rem 1.55rem;

            background: var(--order-list-bg);
            border: 1px solid var(--order-list-border);

            color: rgba(255,255,255,0.94);
            line-height: 1.55;
            font-weight: 600;
          }


          .autogramme-order .autogramme-list li{
            height: 96px;

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


          .porto-text{
            display: block;
            width: 100%;

            text-align: center;
          }


/* =========================================================
   6) GRID FÜR AUTOGRAMMKARTEN
========================================================= */

          .autogramme-grid{
                    display: grid;
                    grid-template-columns: repeat(auto-fill, 171px);
                    justify-content: start;
                    gap: 20px;
                    align-items: start;
          }

          .autogramme-item{
            width: 180px;
            min-height: 250px;
            margin: 0;
            padding: 0.9rem;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;

            text-align: center;

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


          .autogramme-item: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);
          }


          .autogramme-image{
            width: 100%;
            height: 180px;
            margin-bottom: 0.75rem;

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


          .autogramme-image img{
            display: block;
            width: auto;
            max-width: 133px;
            max-height: 180px;
            height: auto;

            object-fit: contain;

            border-radius: calc(var(--radius-sm) * 0.7);
            border: 1px solid rgba(255,255,255,0.16);
          }


          .autogramme-item figcaption{
            margin-top: auto;

            text-align: center;
            font-family: var(--font-style-ui);
            font-size: calc(var(--font-size-content) * 0.92);
            font-weight: 700;
            color: rgba(255,255,255,0.92);
          }


/* =========================================================
   7) LANGE SEITE / SCROLLMARGIN
========================================================= */

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


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

@media (max-width: 768px){

          .autogramme-intro-box,
          .autogramme-section{
            padding: calc(var(--menu-gap) * 0.9);
          }

          .autogramme-order-grid{
            grid-template-columns: 1fr;
          }

          .autogramme-text{
            min-height: 0;
          }

          .autogramme-grid{
            grid-template-columns: repeat(auto-fill, 140px);
            gap: 16px;
          }

          .autogramme-item{
            width: 140px;
            min-height: 235px;
          }

          .autogramme-image{
            height: 150px;
          }

          .autogramme-image img{
            max-width: 112px;
            max-height: 150px;
          }

}


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

@media (max-width: 480px){

          .autogramme-grid{
            grid-template-columns: 1fr;
          }

          .autogramme-item{
            width: 100%;
            max-width: 220px;
            margin: 0 auto;
          }

}