/* oswald-regular - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('//cdn.firmedia.net/cdn/fonts/oswald-v47-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('//cdn.firmedia.net/cdn/fonts/oswald-v47-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('//cdn.firmedia.net/cdn/fonts/oswald-v47-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('//cdn.firmedia.net/cdn/fonts/oswald-v47-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('//cdn.firmedia.net/cdn/fonts/oswald-v47-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('//cdn.firmedia.net/cdn/fonts/oswald-v47-latin-regular.svg#Oswald') format('svg'); /* Legacy iOS */
}



a { 

  color: #ff6600;
}


a p { 
     --tw-text-opacity: 1;
      color: rgb(31 41 55/var(--tw-text-opacity,1));
}


.swiper-slide a p { 
     --tw-text-opacity: 1;
     color:#ff6600;
     text-align: center;
}

.swiper-slide a:hover p { 
     --tw-text-opacity: 1;
     color:#fff;
}

/* bilder höhe in artikel seiten */
.h-articleimg {

     height:30rem;
}

.sponsor-swiper {
     width: 100%;
}

/* Swiper selbst */
.sponsor-swiper .swiper-wrapper {
     align-items: stretch;
}

/* Einzelner Slide */
.sponsor-swiper .swiper-slide {
     display: flex;
     align-items: center;
     justify-content: center;
}

/* =========================
        LOGO-FRAME (entscheidend)
        ========================= */
.sponsor-swiper .logo-frame {
     width: 100%;
     height: 100%;
     /* ← volle Container-Höhe */
     min-height: 300px;
     /* ← Mindesthöhe definieren */
     display: flex;
     align-items: center;
     justify-content: center;
     padding:
          1rem;
     box-sizing: border-box;
}

/* Logo selbst */
.sponsor-swiper .logo-frame img {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
     display: block;
}

/* =========================
        NAVIGATION (PFEILE)
        ========================= */
.sponsor-swiper .swiper-button-next,
.sponsor-swiper .swiper-button-prev {
     color: #ff6600;
     /* Harley Orange */
     width: 32px;
     height: 32px;
     margin: -1rem;
}

.sponsor-swiper .swiper-button-next::after,
.sponsor-swiper .swiper-button-prev::after {
     font-size: 28px;
     font-weight: bold;
}


.dealer-swiper .swiper-button-next,
.dealer-swiper .swiper-button-prev {
     color: #ff6600;
     /* Harley Orange */
     width: 32px;
     height: 32px;
     margin: -1rem;
}

.dealer-swiper .swiper-button-next::after,
.dealer-swiper .swiper-button-prev::after {
     font-size: 28px;
     font-weight: bold;
}


/* =========================
        RESPONSIVE FEINSCHLIFF
        ========================= */
@media (max-width: 1024px) {
     .sponsor-swiper .logo-frame {
          height: 180px;
     }
}

@media (max-width: 640px) {
     .sponsor-swiper .logo-frame {
          height: 160px;
     }
}

.hero-swiper {
     z-index: 0;
}

.hero-swiper,
.hero-swiper .swiper-wrapper,
.hero-swiper .swiper-slide {
     height: 100%;
}

/* =========================
        CONTENT GRID (Bootstrap-like)
        ========================= */
.content-grid {
     display: grid;
     grid-template-columns: repeat(12, minmax(0, 1fr));
     gap:
          1.5rem;
     align-items: start;
     grid-auto-flow: dense;
     /* Masonry-Effekt */
}

/* Spalten wie Bootstrap */
.col-12 {
     grid-column: span 12;
}

.col-6 {
     grid-column: span 6;
}

.col-4 {
     grid-column: span 4;
}

@media (max-width: 768px) {

     .col-6,
     .col-4 {
          grid-column: span 12;
     }
}

.gallery-loader {
     position: relative;
     min-height: 120px;
}

.gallery-loader .spinner {
     position: absolute;
     top: 20px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 1;
}

.masonry-gallery {
     display: flex;
     flex-wrap: wrap;
     margin-left: -10px;
     width: auto;
}

.grid-item {
     padding-left: 10px;
     margin-bottom: 10px;
     width: calc(50% - 10px);
}

@media (min-width: 768px) {
     .grid-item {
          width: calc(33.3333% - 10px);
     }
}

@media (min-width: 992px) {
     .grid-item {
          width: calc(25% - 10px);
     }
}

.grid-item img {
     width: 100%;
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     transition: transform 0.2s;
     object-fit: cover;
     display: block;
}

.grid-item img:hover {
     transform: scale(1.02);
}

.hero {
     height: 70vh;
     min-height: 320px;
     position: relative;
     overflow: hidden;
     background-color: #ff6600;
}

@media (min-width: 768px) {
     .hero {
          min-height: 0;
          /* wichtig: 70vh neutralisieren */
          height: 50vh;
          /* DESKTOP */
     }
}

.hero-swiper {
     position: absolute  !important;
     inset: 0;
     z-index: 0;
     transform: none !important;
}