/* =============================================================
   06 – AUSZEICHNUNGEN
   Dunkelblauer Verlauf mit Maxlrain-Papiertextur (wie Geschichte/
   Zeitleiste). Weiße Kennzahl-Kacheln mit invertierten Ecken;
   Kachel „Gold" trägt die überstehende Gold-Medaille. Darunter
   eine interaktive Foto-Collage (gedreht, überlappend).
   ============================================================= */

.auszeichnungen {
  position: relative;
  isolation: isolate;          /* eigener Stacking-Context für die Textur-Ebene */
  overflow: hidden;
  background: linear-gradient(180deg, var(--c-blue) 0%, var(--c-blue-dark) 58%, var(--c-blue-deep) 100%);
}

/* Papier-Textur partiell (oben präsent, nach unten auslaufend) – wie .geschichte */
.auszeichnungen::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../assets/images/Maxlrainer_Hintergrund.webp") center top / cover no-repeat;
  mix-blend-mode: soft-light;
  opacity: 0.7;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.72) 34%, transparent 80%);
          mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.72) 34%, transparent 80%);
}
.auszeichnungen > .container { position: relative; z-index: 1; }

/* Hopfen-Skizze: stark vergrößert, unten links angeschnitten, sehr dezent */
.auszeichnungen::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  bottom: clamp(-160px, -11vw, -80px); left: clamp(-150px, -10vw, -70px);
  width: clamp(380px, 44vw, 760px); aspect-ratio: 1 / 1;
  background: url("../assets/images/Hopfen_Skizze@4x.webp") center / contain no-repeat;
  opacity: 0.09;
  transform: rotate(-18deg);
}

/* ---- Kennzahl-Kacheln ---- */
.award-grid { margin-bottom: 1.5rem; }

.award {
  position: relative;
  isolation: isolate;          /* hält die Rahmen-Ebene (z-index:-1) in der Kachel */
  padding: clamp(1.8rem, 3vw, 2.4rem);
  transition: transform 0.3s var(--ease);
}
.award:hover { transform: translateY(-5px); }

/* Kachel-Fläche: weiß, invertierte Ecken (Maske), gelbe Kontur folgt der
   Silhouette per Drop-Shadows (auf dem äußeren Frame-Element, damit der
   Filter NACH der Maske greift) */
.award__frame {
  position: absolute; inset: 0; z-index: -1;
  filter:
    drop-shadow(1.5px 0 0 var(--c-yellow))
    drop-shadow(-1.5px 0 0 var(--c-yellow))
    drop-shadow(0 1.5px 0 var(--c-yellow))
    drop-shadow(0 -1.5px 0 var(--c-yellow))
    drop-shadow(0 18px 30px rgba(0, 10, 25, 0.35));
}
.award__frame-inner {
  --notch: 20px;               /* Radius der nach innen gekehrten Ecken */
  position: absolute; inset: 0; display: block;
  background: #fff;
  -webkit-mask:
    radial-gradient(circle at left  top,    transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left  top    / 51% 51% no-repeat,
    radial-gradient(circle at right top,    transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right top    / 51% 51% no-repeat,
    radial-gradient(circle at left  bottom, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left  bottom / 51% 51% no-repeat,
    radial-gradient(circle at right bottom, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right bottom / 51% 51% no-repeat;
          mask:
    radial-gradient(circle at left  top,    transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left  top    / 51% 51% no-repeat,
    radial-gradient(circle at right top,    transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right top    / 51% 51% no-repeat,
    radial-gradient(circle at left  bottom, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left  bottom / 51% 51% no-repeat,
    radial-gradient(circle at right bottom, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right bottom / 51% 51% no-repeat;
}

.award__num {
  display: block;
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.2rem); line-height: 1;
  color: var(--c-blue); margin-bottom: 0.7rem;
}
.award__num--gold { color: var(--c-yellow-dk); }
.award h3 { font-size: 1.3rem; margin-bottom: 0.6rem; color: var(--c-ink); }   /* nicht die helle section--dark-Farbe erben */
.award p { color: var(--c-ink-soft); font-size: 0.97rem; }

/* Gold-Medaille: ragt oben rechts über die Kachel hinaus */
.award__medal {
  position: absolute;
  top: clamp(-52px, -4vw, -36px);
  right: clamp(-30px, -2.2vw, -18px);
  width: clamp(110px, 9.5vw, 150px);
  transform: rotate(10deg);
  filter: drop-shadow(0 12px 22px rgba(0, 10, 25, 0.45));
  pointer-events: none;
}
.award--gold h3 { padding-right: clamp(2rem, 4vw, 4.5rem); }   /* Platz unter der Medaille */

/* ---- Foto-Collage: Team & Medaille ----
   Leicht gedreht und überlappend; Rahmen mit invertierten Ecken wie oben.
   Hover/Antippen: Bild richtet sich auf, hebt sich und kommt nach vorn. */
.award-photos {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
}
.award-photo {
  position: relative;
  margin: 0;
  width: clamp(230px, 30vw, 460px);
  cursor: pointer;
  filter:
    drop-shadow(2px 0 0 var(--c-yellow))
    drop-shadow(-2px 0 0 var(--c-yellow))
    drop-shadow(0 2px 0 var(--c-yellow))
    drop-shadow(0 -2px 0 var(--c-yellow))
    drop-shadow(0 24px 40px rgba(0, 10, 25, 0.45));
  transition: transform 0.5s var(--ease), z-index 0s;
}
.award-photo img {
  --notch: 20px;
  width: 100%; height: auto;
  -webkit-mask:
    radial-gradient(circle at left  top,    transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left  top    / 51% 51% no-repeat,
    radial-gradient(circle at right top,    transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right top    / 51% 51% no-repeat,
    radial-gradient(circle at left  bottom, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left  bottom / 51% 51% no-repeat,
    radial-gradient(circle at right bottom, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right bottom / 51% 51% no-repeat;
          mask:
    radial-gradient(circle at left  top,    transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left  top    / 51% 51% no-repeat,
    radial-gradient(circle at right top,    transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right top    / 51% 51% no-repeat,
    radial-gradient(circle at left  bottom, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left  bottom / 51% 51% no-repeat,
    radial-gradient(circle at right bottom, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right bottom / 51% 51% no-repeat;
}

/* Anordnung: schräg + überlappend (Medaille hochkant in der Mitte, vorn) */
.award-photo--1 { transform: rotate(-4deg) translateY(6px); z-index: 1; }
.award-photo--2 {
  width: clamp(180px, 20vw, 300px);          /* Hochformat → schmaler */
  margin-inline: clamp(-3.5rem, -3vw, -2rem);
  transform: rotate(3deg) translateY(-8px);
  z-index: 2;
}
.award-photo--3 { transform: rotate(-2.5deg) translateY(10px); z-index: 1; }

/* Antippen/Hover: aufrichten, anheben, nach vorn */
.award-photo:hover,
.award-photo:active {
  transform: rotate(0deg) translateY(-14px) scale(1.045);
  z-index: 4;
}

@media (max-width: 720px) {
  .award-photos { flex-direction: column; }
  .award-photo { width: min(78vw, 420px); }
  .award-photo--2 { width: min(58vw, 300px); margin: -2.2rem 0; }
}