/* ══════════════════════════════════════════════════════════
   Kollegium-Sektion (Premium Stil)
   ══════════════════════════════════════════════════════════ */
#kollegium {
  background: var(--color-bg);
}
#kollegium.pt-0,
#kollegium[style*="padding-top: 0"],
#kollegium[style*="padding-top:0"] {
  padding-top: 0px !important;
}

/* Section Head with Subheadline */
#kollegium .section-head:has(.section-subheadline),
.kollegium-section .section-head:has(.section-subheadline) {
  text-align: left;
  margin-inline: 0;
  margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
}

#kollegium .section-head .section-subheadline,
.kollegium-section .section-head .section-subheadline {
  text-align: left;
  margin-inline: 0;
  margin-top: 0;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  #kollegium .section-head:has(.section-subheadline),
  .kollegium-section .section-head:has(.section-subheadline) {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    text-align: left;
  }
}

/* Grid */
.kollegium__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.2vw, 2rem);
}

/* Apple Bento Balance: Zentriert bei genau 5 Karten die untere 2er-Reihe harmonisch auf Desktop */
@media (min-width: 1025px) {
  .kollegium__grid:has(> .kollegium-card:nth-child(5):last-child) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .kollegium__grid:has(> .kollegium-card:nth-child(5):last-child) > .kollegium-card {
    flex: 0 0 calc((100% - 2 * clamp(1.25rem, 2.2vw, 2rem)) / 3);
    max-width: calc((100% - 2 * clamp(1.25rem, 2.2vw, 2rem)) / 3);
  }
}

/* Karte (Apple Ultra-Smooth Motion & GPU composited) */
.kollegium-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4); /* consistent vertical rhythm */
  background: var(--color-surface);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  /* Hardware-Beschleunigung & Subpixel-Glättung */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Snappy Apple Scroll-Reveal (subtiler Hub von 8px + Micro-Scale 0.99, Emil Kowalski <300ms Rule) */
.kollegium-card.reveal {
  opacity: 0;
  -webkit-transform: translate3d(0, 10px, 0) scale3d(0.985, 0.985, 1);
  transform: translate3d(0, 10px, 0) scale3d(0.985, 0.985, 1);
  transition: opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.38s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.38s cubic-bezier(0.23, 1, 0.32, 1);
}

.kollegium-card.reveal.is-visible {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}

/* Apple Smooth Hover & Touch Animation (Desktop + iPhone/iPad) */
.kollegium-card.reveal.is-visible:hover,
.kollegium-card.reveal.is-visible:active,
.kollegium-card.reveal.is-visible:focus-within,
.kollegium-card.reveal.is-visible.is-touch-active,
.kollegium-card:hover,
.kollegium-card:active,
.kollegium-card:focus-within,
.kollegium-card.is-touch-active {
  box-shadow: var(--shadow-xl);
  -webkit-transform: translate3d(0, -4px, 0) scale3d(1, 1, 1);
  transform: translate3d(0, -4px, 0) scale3d(1, 1, 1);
  transition: transform 0.28s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.28s cubic-bezier(0.23, 1, 0.32, 1);
}

@media (prefers-reduced-motion: reduce) {
  .kollegium-card,
  .kollegium-card.reveal,
  .kollegium-card:hover,
  .kollegium-card:active,
  .kollegium-card.is-touch-active {
    transition: opacity 0.2s ease;
    transform: none !important;
    -webkit-transform: none !important;
  }
}

.kollegium-card__media {
  aspect-ratio: 5 / 4;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.kollegium-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.kollegium-card:hover .kollegium-card__media img,
.kollegium-card:active .kollegium-card__media img,
.kollegium-card:focus-within .kollegium-card__media img,
.kollegium-card.is-touch-active .kollegium-card__media img {
  -webkit-transform: scale3d(1.03, 1.03, 1);
  transform: scale3d(1.03, 1.03, 1);
}

.kollegium-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;          /* füllt die Karte, ermöglicht bündigen Mail-Button unten */
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  padding: clamp(1.5rem, 2.4vw, 2.125rem);
}
.kollegium-card__name {
  /* Für iPhone (Mobile): Ästhetisch größere, prägnantere Typografie */
  font-size: 1.625rem; /* 26px */
  font-weight: 700; /* Bold for hierarchy */
  line-height: 1.25; /* Etwas tighter für die größere Schrift */
  letter-spacing: -0.02em; /* Typisches Premium-Tracking für große Headlines */
  color: var(--color-text-black);
  text-wrap: balance;
  font-feature-settings: "liga" 1, "kern" 1;
  margin-bottom: var(--space-20); /* added vertical spacing */
}

@media (min-width: 768px) {
  .kollegium-card__name {
    /* Für Tablet & Desktop: Dynamischer Scale (20px bis 25px) passend zum 3er-Grid */
    font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5625rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
  }
}
.kollegium-card__subjects {
  margin: 0; /* spacing handled by parent flex gap */
  margin-bottom: var(--space-20); /* added larger gap to description */
  font-size: var(--body-fs);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.001em;
  color: var(--text-color);
  font-variant-numeric: oldstyle-nums;
}
.kollegium-card__subjects em {
  font-style: italic;
}
.kollegium-card__desc {
  margin: 0; /* spacing handled by parent flex gap */
  margin-bottom: var(--space-40); /* increased spacing before mail icon */
  font-size: var(--body-small-fs);
  line-height: 1.5;
  letter-spacing: 0.002em;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* Mail-Button (Accent) */
.kollegium-card__mail {
  margin-top: auto;        /* immer bündig am unteren Kartenrand */
  align-self: flex-start;  /* immer links */
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid #a60032;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #a60032;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: background-color 0.18s cubic-bezier(0.23, 1, 0.32, 1),
              color 0.18s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.18s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.18s cubic-bezier(0.23, 1, 0.32, 1);
}
.kollegium-card__mail svg {
  width: 18px;
  height: 18px;
  display: block;
}

.kollegium-card__mail:hover,
.kollegium-card__mail:active,
.kollegium-card__mail:focus-visible,
.kollegium-card__mail.is-touch-active {
  background-color: #a60032;
  color: #fff;
  border-color: #a60032;
  -webkit-transform: scale3d(1.05, 1.05, 1);
  transform: scale3d(1.05, 1.05, 1);
}

/* Gestaffeltes Scroll-Reveal der Karten – sanfte Kaskade */
.kollegium__grid .reveal:nth-child(3n + 1) { transition-delay: 0.03s; }
.kollegium__grid .reveal:nth-child(3n + 2) { transition-delay: 0.07s; }
.kollegium__grid .reveal:nth-child(3n)     { transition-delay: 0.11s; }

/* iPad Portrait: 744px–1024px → 2 Spalten */
@media (max-width: 1024px) {
  .kollegium__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .kollegium__grid .reveal { transition-delay: 0s; }
}

/* iPhone / mobiles Apple-Gerät (≤ 768px) → 1 Spalte, 100% bündig mit Fließtext */
@media (max-width: 768px) {
  .kollegium__grid {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }
  .kollegium-card {
    width: 100%;
    max-width: 100%;
  }
}

/* Standalone Single Card (Zentrierte einzelne Zeile) */
.kollegium__standalone {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: clamp(1.25rem, 2.2vw, 2rem);
}

.kollegium__standalone .kollegium-card {
  width: 100%;
  max-width: calc((100% - 2 * clamp(1.25rem, 2.2vw, 2rem)) / 3);
}

@media (max-width: 1024px) {
  .kollegium__standalone .kollegium-card {
    max-width: calc((100% - clamp(1.25rem, 2.2vw, 2rem)) / 2);
  }
}

@media (max-width: 767px) {
  .kollegium__standalone .kollegium-card {
    max-width: 460px;
  }
}

/* Bildungsgangleitung Card in Bildungsgängen (exaktes Format wie kollegium.html) */
.article__body .kollegium-card {
  width: 100%;
  max-width: 360px;
}

/* Group Headlines in Kollegium */
.kollegium-section .sekretariat-map-title,
#kollegium .sekretariat-map-title {
  font-family: var(--displayfont, 'TheSansOffice', 'TheSans', sans-serif);
  font-size: clamp(2rem, 3.5vw, 48px);
  line-height: 52px;
  letter-spacing: -0.144px;
  font-weight: 700;
  color: #1d1d1d;
  margin: 0 0 clamp(1.25rem, 2vw, 1.75rem) 0;
  text-wrap: balance;
}

/* Link zum Bildungsgang (Animated accent link like in article text) */
.kollegium-card__course-links {
  margin-top: auto;
  margin-bottom: var(--space-16, 1rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.kollegium-card__course-link {
  font-family: var(--textfont, 'TheSansOffice', 'TheSans', sans-serif);
  font-size: var(--body-small-fs, 0.9375rem);
  font-weight: 400;
  color: #a60032;
  text-decoration: none;
  display: inline-block;
  background-image: linear-gradient(#a60032, #a60032);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 400ms cubic-bezier(0.22, 1, 0.36, 1);
  line-height: 1.4;
  cursor: pointer;
}

.kollegium-card__course-link:hover {
  background-size: 100% 1px;
}

.kollegium-card__course-links + .kollegium-card__mail {
  margin-top: 0;
}