/* ==========================================================================
   Ansicht B — Entwurf an die vorhandenen Bilder angepasst
   Wird nur von index-angepasst.html zusätzlich zu styles.css geladen.
   ========================================================================== */

/* ---- Podium: Hochformat-Porträt links statt Querformat-Band oben ---------
   Die Quellfotos sind nur ~240 px breit; bei 120 × 160 px bleiben sie auch
   auf Retina-Displays scharf und die Köpfe werden nicht angeschnitten.     */
.panel { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .panel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.guest {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px;
  padding: 22px;
}
.guest__photo { width: 120px; height: 160px; flex: none; border-radius: var(--radius); }
.guest__body { padding: 0; flex: 1 1 170px; min-width: 0; }

.guest--tba { flex-direction: row; }
.guest--tba .guest__photo { border: 1px dashed rgb(var(--cream) / .3); }

.guest--cta { flex-direction: row; flex-wrap: wrap; align-items: center; }
.guest--cta > div { flex: 1 1 260px; }
.guest--cta .btn { flex: none; }
/* Mitmach-Kachel füllt die Reihe: bei zwei Spalten nur, wenn sie eine neue Reihe beginnt */
@media (min-width: 700px) and (max-width: 1099px) { .guest--cta:nth-child(odd) { grid-column: span 2; } }
@media (min-width: 1100px) { .guest--cta { grid-column: span 2; } }

/* ---- Location: fünf Fotos, Innenaufnahme als Aufmacher ------------------ */
.location__gallery .aufmacher { grid-column: span 2; height: 250px; }
.location__gallery .tall,
.location__gallery .short { height: 170px; }

/* ---- Vol. 1: Methodenstände mit Porträts -------------------------------- */
.vol1-methods { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--rule); }
.vol1-methods__title { font: 700 18px/1.3 var(--font-sans); color: var(--c-cream); margin-bottom: 20px; }
.vol1-methods__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 20px; }
/* Zwei Spalten (Liste 860–1299 px breit): eine übrige letzte Karte läuft über die volle Breite */
.vol1-methods__list { container-type: inline-size; }
@container (min-width: 860px) and (max-width: 1299.98px) {
  .method:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.method {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start;
  border: 1px solid var(--rule); background: var(--c-bg); padding: 22px;
}
.method__photo { width: 96px; height: 128px; flex: none; }
.method__body { flex: 1 1 220px; min-width: 0; }
.method h4 { font: 700 18px/1.3 var(--font-sans); color: var(--c-cream); }
.method__role { font: 500 13px/1.5 var(--font-sans); color: var(--c-warm); margin: 5px 0 10px; }
.method__text { font-size: 14px; line-height: 1.6; color: rgb(var(--cream) / .68); }

/* ---- Partner: Logos auf hellen Kacheln, damit die Originalfarben lesbar sind */
.slot--logo {
  width: 156px; height: 62px;
  background: var(--c-cream);
  border-radius: var(--radius);
  transition: transform .15s, box-shadow .15s;
}
.slot--logo > img { inset: 10px 16px; width: calc(100% - 32px); height: calc(100% - 20px); }
a.slot--logo:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgb(0 0 0 / .35); }
a.slot--logo:hover img { opacity: 1; }

/* ---- FAQ: zwei Spalten nach Thema, auf schmalen Screens untereinander --- */
.faq__cols { display: grid; gap: 36px 24px; }
.faq__cols .faq__list { max-width: none; }
.faq__col-title { margin-bottom: 14px; }
.faq__col-title--weiter { margin-top: 36px; }
@media (min-width: 900px) {
  .faq__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* ---- Mobil: Podium und Methodenstände wie die Gastgeber-Karten ----------- */
@media (max-width: 560px) {
  .guest:not(.guest--cta), .method {
    display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 16px;
  }
  .guest:not(.guest--cta) .guest__body, .method__body { display: contents; }
  .guest:not(.guest--cta) .guest__photo, .method__photo { grid-row: 1 / span 2; width: 96px; height: 128px; }
  .guest__body > :nth-child(1), .method__body > :nth-child(1) { grid-column: 2; grid-row: 1; align-self: end; }
  .guest__body > :nth-child(2), .method__body > :nth-child(2) { grid-column: 2; grid-row: 2; align-self: start; }
  .guest__body > :nth-child(n+3), .method__body > :nth-child(n+3) { grid-column: 1 / -1; }
  .guest__body > :nth-child(3), .method__body > :nth-child(3) { grid-row: 3; margin-top: 16px; }
  .guest__body > :nth-child(4) { grid-row: 4; }
  .guest__role, .method__role { margin: 5px 0 0; }
  .guest__status { margin-bottom: 8px; }

  .partner__logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
  .slot--logo { width: auto; }
}
@media (max-width: 480px) {
  .guest--cta .btn { flex: 1 1 100%; }
}

/* ---- Kontakt: Text links, rechts der Knopf, der das Formular aufklappt --- */
.kontakt {
  padding: var(--pad-y-sm) var(--pad-x);
  border-top: 1px solid var(--rule-soft);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 28px clamp(32px, 5vw, 60px); align-items: start;
}
.kontakt .eyebrow { margin-bottom: 14px; }
.kontakt .h2 { margin-bottom: 12px; }
.kontakt__lead { font-size: 16px; line-height: 1.6; color: rgb(var(--cream) / .75); max-width: 480px; text-wrap: pretty; }
.kontakt__klappe:not([open]) { align-self: center; }
.kontakt__klappe summary { list-style: none; gap: 14px; }
.kontakt__klappe summary::-webkit-details-marker { display: none; }
.kontakt__klappe[open] summary { margin-bottom: 24px; }
.kontakt__plus { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1; color: var(--c-accent); transition: transform .2s; }
.kontakt__klappe[open] .kontakt__plus { transform: rotate(45deg); }