/* Ansprechpartner: Team-Tableau. Ein Bild, das sich umdrehen laesst. */
#top-sentinel{top:-400px !important}              /* Kopfleiste von Anfang an hell: kein dunkler Seitenkopf */
.team{padding:calc(var(--header-h) + 24px) 0 clamp(48px, 7vw, 96px)}
.team__tafel{display:grid; gap:14px; grid-template-columns:1fr}
.team__intro,.team__zentrale{container-type:inline-size; position:relative; overflow:hidden; border-radius:var(--r-xl);
  padding:clamp(24px, 4vw, 44px) clamp(22px, 3vw, 36px); display:flex; flex-direction:column}
.team__intro{gap:16px; background:linear-gradient(176deg, #fff, #F1F5FA 72%, #E8EEF7)}
.team__intro .crumbs{color:var(--navy-500); font-size:.9375rem}
.team__intro .crumbs span{opacity:1}
.team__intro .crumbs span:not(:last-child){color:var(--navy-400)}
.team__intro h1{font-size:clamp(2rem, 12cqi, 3.4rem); line-height:1.02; letter-spacing:-.035em; color:var(--navy-900)}
.team__lead{font-size:var(--fs-lead); line-height:1.55; color:var(--navy-500); max-width:34ch}
.team__zentrale{gap:14px; justify-content:center;
  background:radial-gradient(85% 75% at 0% 105%, rgba(245,184,0,.30), rgba(245,184,0,.08) 46%, transparent 72%), linear-gradient(176deg, #fff, #F1F5FA 72%, #E8EEF7)}
.team__frage{font-size:1.0625rem; color:var(--navy-500)}
.team__nummer{display:inline-flex; align-items:center; gap:14px; align-self:flex-start; text-decoration:none; color:var(--navy-900);
  font-family:var(--font-display); font-weight:700; font-size:clamp(1.6rem, 9.5cqi, 2.5rem); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.team__ruf{width:clamp(48px, 13cqi, 60px); aspect-ratio:1; border-radius:50%; background:var(--sun-500); color:var(--navy-900); display:grid; place-items:center;
  box-shadow:0 6px 16px rgba(1,37,73,.16); transition:transform 160ms var(--ease-out)}
.team__ruf .ico{width:45%; height:45%}
.team__nummer:active .team__ruf{transform:scale(.95)}
.team__nummer:focus-visible{outline:3px solid var(--sun-500); outline-offset:6px; border-radius:var(--r-md)}
.team__zeit{font-family:var(--font-mono); font-size:.9375rem; color:var(--navy-500)}
.team__mail{font-size:1.0625rem; color:var(--navy-500)}
.team__mail a{color:var(--navy-900); text-underline-offset:3px; white-space:nowrap}
.ico{width:1.1em; height:1.1em; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

.team__liste{display:grid; gap:14px; grid-template-columns:1fr; list-style:none; margin:0; padding:0}
.karte{position:relative; aspect-ratio:4 / 5; border-radius:24px; perspective:1400px; box-shadow:var(--shadow-md);
  transition:transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out)}
.karte__innen{position:absolute; inset:0; border-radius:24px; transform-style:preserve-3d; transition:transform 450ms var(--ease-out)}
.karte.ist-gedreht .karte__innen{transform:rotateY(180deg)}
.karte__vorn,.karte__rueck{position:absolute; inset:0; border-radius:24px; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden}
.karte__vorn{background:#010F1F; color:#fff}
/* Das Foto fuellt die oberen drei Viertel; die Schrift steht darunter, nicht im Gesicht. */
.karte__vorn img{position:absolute; top:0; left:0; width:100%; height:74%; object-fit:cover; object-position:var(--fokus, 50% 30%); transition:transform 700ms var(--ease-out)}
.karte__vorn::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(1,24,47,0) 42%, rgba(1,24,47,.55) 58%, #01182F 74%, #010F1F 100%)}
.karte__info{position:absolute; left:22px; right:22px; bottom:20px; z-index:1}
.karte__name{font-family:var(--font-display); font-weight:700; font-size:clamp(1.45rem, 1.2rem + .6vw, 1.7rem); line-height:1.08; letter-spacing:-.02em; color:inherit}
.karte__rolle{font-size:1.0625rem; line-height:1.35; margin-top:4px; color:rgba(255,255,255,.9)}
.karte__ort{display:flex; gap:6px; align-items:center; margin-top:6px; font-size:.9375rem; color:rgba(255,255,255,.86)}
.karte__aktionen{display:flex; gap:8px; margin-top:14px}
.karte__aktionen .btn{min-height:44px; padding:0 18px; font-size:1rem}
.karte__rueck{transform:rotateY(180deg); color:#fff; padding:66px 22px 22px; display:flex; flex-direction:column;
  background:radial-gradient(80% 90% at 85% -15%, rgba(245,184,0,.34), rgba(245,184,0,.08) 46%, transparent 74%), linear-gradient(168deg, #04223F, #01182F 52%, #010F1F)}
.karte__rueck .karte__name{font-size:clamp(1.3rem, 1.1rem + .5vw, 1.5rem)}
.karte__wege{list-style:none; margin:12px 0 16px; padding:0; display:grid; gap:0}
.karte__wege li,.karte__wege a{display:flex; gap:12px; align-items:center; min-height:42px; font-size:1.0625rem; color:#fff; text-decoration:none; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.karte__wege a:hover span{text-decoration:underline; text-underline-offset:3px}
.karte__wege .ico{color:var(--sun-500)}
.karte__ziel{margin-top:auto; align-self:stretch; justify-content:flex-start; min-height:48px; padding:10px 18px; white-space:normal; text-align:left; line-height:1.2; font-size:1rem}
.karte__dreh{position:absolute; top:14px; right:14px; z-index:2; height:40px; padding:0 14px 0 12px; border-radius:var(--r-pill); border:0; cursor:pointer;
  display:inline-flex; gap:8px; align-items:center; color:#fff; font:700 .9375rem/1 var(--font-body);
  background:rgba(1,24,47,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:transform 160ms var(--ease-out), background-color 200ms ease}
.karte__dreh .ico{width:18px; height:18px; transition:transform 450ms var(--ease-out)}
.karte.ist-gedreht .karte__dreh{background:rgba(255,255,255,.16)}
.karte.ist-gedreht .karte__dreh .ico{transform:rotate(-180deg)}
.karte__dreh:active{transform:scale(.95)}
.karte__dreh:focus-visible{outline:3px solid var(--sun-500); outline-offset:2px}
html:not(.js) .karte__dreh,html:not(.js) .karte__rueck{display:none}
::selection{background:var(--sun-300); color:var(--navy-900)}

@media (hover:hover) and (pointer:fine){
  .karte:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
  .karte:hover .karte__vorn img{transform:scale(1.03)}
  .karte__dreh:hover{background:rgba(1,24,47,.88)}
  .team__nummer:hover .team__ruf{transform:scale(1.05)}
}
/* Unter 1100 px laufen Karten und Zentrale in einem Raster: die Zentrale steht direkt
   hinter der ersten Karte (Handy) bzw. der ersten Reihe (Tablet), nicht hinter allen sechs. */
@media (max-width:1099px){
  .team__liste{display:contents}
  .team__intro{order:0}
  .karte{order:3}
  .karte:first-child{order:1}
  .team__zentrale{order:2}
}
@media (min-width:640px) and (max-width:1099px){
  .team__tafel{grid-template-columns:1fr 1fr}
  .team__intro,.team__zentrale{grid-column:1 / -1}
  .karte:nth-child(2){order:1}
}
@media (min-width:1100px){
  .team__tafel{grid-template-columns:minmax(0, 1.6fr) minmax(0, 3fr); grid-template-rows:1fr 1fr;
    grid-template-areas:"intro liste" "zentrale liste"}
  .team__intro{grid-area:intro}
  .team__zentrale{grid-area:zentrale}
  .team__liste{grid-area:liste; grid-template-columns:repeat(3, 1fr)}
  .karte{aspect-ratio:auto; height:clamp(340px, calc((100svh - var(--header-h) - 64px) / 2), 400px)}
  .karte__vorn img{height:var(--bild-d, 74%)}
}
@media (prefers-reduced-motion:reduce){
  .karte,.karte__innen{transition:none}
  .karte__innen{transform:none !important}
  .karte__vorn,.karte__rueck{backface-visibility:visible; transition:opacity 200ms ease}
  .karte__rueck{transform:none; opacity:0; visibility:hidden}
  .karte.ist-gedreht .karte__rueck{opacity:1; visibility:visible}
  .karte.ist-gedreht .karte__vorn{opacity:0}
  .karte__vorn img,.karte__dreh .ico,.team__ruf{transition:none}
  .karte:hover{transform:none}
}