/* ==========================================================================
   /team — nur was diese Seite unverwechselbar macht
   Reihenfolge (website-bauen 2B.1): 1 Hero · 2 Sektions-Bausteine
   3 Zustaende auf dunklem Grund · 4 Lesegroessen klein (zuletzt)
   Steckbrief: pages/001_2026-10-28_team/hero-steckbrief.md
   ========================================================================== */

/* ── 1 Hero: Panorama-Band ueber volle Breite, Text darunter, Unterschrift ── */
.hero-team { background: var(--color-bg); }
.team-band { position: relative; height: clamp(320px, 50svh, 560px); overflow: hidden; background: var(--color-alt); }
.team-band img {
  width: 100%; height: 100%; object-fit: cover; object-position: 42% 38%;
  transform-origin: 40% 40%; animation: band-auf 1.6s var(--ease) both;
}
@keyframes band-auf { from { transform: scale(1.06); opacity: .4; } to { transform: none; opacity: 1; } }
/* weicher Auslauf in den Elfenbein-Grund, damit das Band nicht als Kasten endet */
.team-band::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; pointer-events: none;
  background: linear-gradient(0deg, var(--color-bg), rgba(250, 246, 239, 0));
}
.team-kopf {
  position: relative; display: grid; gap: clamp(28px, 4vw, 72px);
  padding: clamp(28px, 4vw, 48px) 0 clamp(56px, 7vw, 96px);
}
@media (min-width: 960px) {
  .team-kopf { grid-template-columns: 1fr 1fr; align-items: start; margin-top: -72px; }
}
.team-zitat {
  position: relative; padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 44px) clamp(20px, 2.4vw, 30px);
  background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow-md);
}
.team-zitat .hero-hook { font-size: clamp(1.75rem, 3.1vw, 2.75rem); color: var(--color-text); }
.zitat-von { display: flex; align-items: flex-end; gap: 14px; margin-top: 18px; }
.unterschrift {
  width: clamp(150px, 15vw, 210px); height: auto;
  clip-path: inset(0 0 0 0); animation: unterschrift 2.2s var(--ease) .5s both;
}
@keyframes unterschrift { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.zitat-von span {
  padding-bottom: 6px; font-size: var(--fs-small); font-weight: 600; color: var(--color-text-2);
}
.team-text { padding-top: clamp(0px, 2vw, 96px); }
@media (min-width: 960px) { .team-text { padding-top: 104px; } }
.hero-team h1 { font-size: clamp(1.75rem, 2.6vw, 2.375rem); line-height: 1.18; color: var(--color-text); }
.hero-team .hero-sub { margin-top: 16px; max-width: 52ch; font-size: var(--fs-lead); color: var(--color-text-2); }
.hero-team .hero-aktion { margin-top: 28px; }
.hero-team .hero-proof { margin-top: 18px; font-size: 1rem; color: var(--color-text-2); }
.hero-team .hero-proof .sterne { color: var(--ci-bronze); letter-spacing: 2px; }
.hero-team .hero-proof b { color: var(--color-text); font-weight: 600; }
.hero-team .hero-stufe { animation: team-auf 1s var(--ease) both; }
.hero-team .hero-stufe.s2 { animation-delay: .15s; } .hero-team .hero-stufe.s3 { animation-delay: .3s; }
.hero-team .hero-stufe.s4 { animation-delay: .45s; } .hero-team .hero-stufe.s5 { animation-delay: .6s; }
@keyframes team-auf { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ── 2 Sektions-Bausteine ────────────────────────────────────────────── */
/* Block 2: Einleitung als Redaktions-Raster: Kopf breit, Bild + Text, Notenzeile */
.einleitung-raster { display: grid; gap: clamp(24px, 3.5vw, 48px); }
.einleitung-kopf h2 { max-width: 18ch; }
.einleitung-lead {
  margin-top: 18px; max-width: 40ch; font-family: var(--font-serif); font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  line-height: 1.35; color: var(--color-text);
}
.einleitung-bild > img { aspect-ratio: 1 / 1; }
@media (min-width: 960px) {
  .einleitung-raster { grid-template-columns: 5fr 7fr; grid-template-areas: "kopf kopf" "bild text" "bild noten"; column-gap: 72px; }
  .einleitung-kopf { grid-area: kopf; display: grid; grid-template-columns: 5fr 7fr; column-gap: 72px; align-items: end; }
  .einleitung-lead { margin-top: 0; }
  .einleitung-bild { grid-area: bild; align-self: start; }
  .einleitung-text { grid-area: text; }
  .notenzeile { grid-area: noten; align-self: end; }
}
/* Notenzeile: die vier Arbeitsfelder aus dem Absatz auf fuenf goldenen Linien */
.notenzeile {
  position: relative; list-style: none; display: flex; justify-content: space-between; gap: 8px;
  padding: 26px 4px; max-width: 620px;
  background: repeating-linear-gradient(180deg, transparent 0 13px, rgba(201, 162, 107, .55) 13px 14px) center / 100% 70px no-repeat;
}
.notenzeile li {
  position: relative; padding: 6px 16px; border-radius: var(--radius-pill); background: var(--color-surface);
  font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; color: var(--color-accent-d);
  box-shadow: 0 0 0 1px var(--color-border);
}
html.js .notenzeile li { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(.2s + var(--i) * .14s); }
html.js .notenzeile.is-in li { opacity: 1; transform: none; }

/* Block 3 + 5: Profile. Migena: Bild links klebt, Ivan: Bild rechts, versetzt */
.profil-raster { display: grid; gap: clamp(32px, 5vw, 80px); }
@media (min-width: 960px) {
  .profil-raster { grid-template-columns: 5fr 7fr; align-items: start; }
  .profil-migena .profil-bild { position: sticky; top: 110px; }
  .profil-raster--rechts { grid-template-columns: 7fr 5fr; }
  .profil-raster--rechts .profil-bild { order: 2; margin-top: 120px; }
  .profil-migena .profil-raster--rechts .profil-bild { margin-top: 0; }  /* Design-Runde 29./30.10.: Bild rechts, Wechsel links/rechts ueber die Seite */
}
.profil-bild { max-width: 480px; width: 100%; justify-self: center; }
.profil-text > h2 { margin: 14px 0 26px; font-size: clamp(1.875rem, 3.3vw, 2.75rem); }
.profil-text .prose h3:first-child { margin-top: 0; }
/* Ivan: Hochformat mit versetzter Sand-Flaeche statt Bogen (anderer Partner-Typ als Migena) */
.ivan-bild { position: relative; }
.ivan-bild::before {
  content: ""; position: absolute; inset: 28px -22px -22px 28px; border-radius: var(--radius);
  background: var(--color-alt); z-index: 0;
}
.ivan-bild img { position: relative; z-index: 1; width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
/* Stationen Migena: waagerechter Weg mit vier Marken (Woerter aus dem Absatz) */
.weg {
  list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  margin: 30px 0 32px; position: relative; max-width: var(--measure);
}
.weg::before {
  content: ""; position: absolute; left: 6px; right: 6px; top: 7px; height: 1px; background: var(--color-line-gold);
  transform-origin: left; transition: transform 1.4s var(--ease) .2s;
}
html.js .weg::before { transform: scaleX(0); }
html.js .weg.is-in::before { transform: scaleX(1); }
.weg li { position: relative; padding-top: 26px; min-width: 0; }
.weg li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%;
  background: var(--color-bg); border: 2px solid var(--ci-bronze);
}
.weg li:last-child::before { background: var(--ci-bronze); }
.weg b { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 1.375rem; line-height: 1.2; color: var(--color-text); }
.weg span { display: block; margin-top: 2px; font-size: 1rem; color: var(--color-text-2); }

/* Block 4: Clara, Bild randlos links ueber die halbe Breite, Zitat rechts auf Sand */
.clara { display: grid; background: var(--color-alt); }
.clara-bild { margin: 0; min-height: 320px; }
.clara-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }
.clara-text { padding: var(--section-pad) var(--gutter); max-width: 700px; }
.clara-text > h2 { margin-bottom: 30px; font-size: clamp(1.875rem, 3.3vw, 2.75rem); }
@media (min-width: 960px) {
  .clara { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .clara-text { align-self: center; padding: var(--section-pad) clamp(40px, 6vw, 96px); }
}

/* Block 6: Kurz gefragt, drei offene Fragekarten nebeneinander */
.kurz > .wrap > h2 { margin-bottom: clamp(28px, 4vw, 44px); }
.kurz-karten { max-width: none; display: grid; gap: 18px; }
@media (min-width: 900px) { .kurz-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kurz-karten details {
  border: 0; border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--shadow-md);
  padding: 4px 24px 6px;
}
.kurz-karten summary { align-items: flex-start; }
.kurz-karten details > div { padding-bottom: 22px; }
.kanaele { list-style: none; margin-top: 12px; display: grid; gap: 8px; }
.kanaele li { padding-left: 18px; position: relative; }
.kanaele li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--ci-bronze); }

/* ── 3 Zustaende auf dunklem Grund ───────────────────────────────────── */
/* keine: /team hat keine Instrument-Buehne (BAUPLAN §4) */

/* ── 4 Lesegroessen klein (immer zuletzt) ────────────────────────────── */
@media (max-width: 899px) {
  .team-band { height: auto; aspect-ratio: 3 / 2; max-height: 34svh; min-height: 220px; }
  .team-band img { object-position: 40% 45%; }
  .team-kopf { padding-top: 0; margin-top: -36px; gap: 22px; }
  .team-zitat { padding: 20px 20px 14px; }
  .team-zitat .hero-hook { font-size: clamp(1.625rem, 7vw, 2rem); }
  .zitat-von { margin-top: 10px; }
  .unterschrift { width: 130px; }
  .team-text { padding-top: 0; }
  .hero-team h1 { font-size: 1.375rem; }
  .hero-team .hero-sub { font-size: 1rem; }
  .hero-team .hero-aktion { margin-top: 20px; }
  .hero-team .hero-aktion .btn { width: 100%; }
  .notenzeile { gap: 6px; padding: 22px 0; }
  .notenzeile li { padding: 5px 10px; font-size: 1rem; }
  .weg { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .weg::before { display: none; }
  .ivan-bild::before { inset: 18px -12px -12px 18px; }
  .clara-bild { min-height: 0; aspect-ratio: 4 / 3; }
}