/*
 * BOXRING Teamseite -- Galeriewand, Hover, Overlay, Wasserzeichen-Ueberschriften.
 * Wird nur auf der Teamseite geladen (siehe functions.php, boxring_is_team_page()).
 * Alle Selektoren beginnen mit .team-wall bzw. .tw- und greifen nur innerhalb des
 * Team-Bereichs. Nicht global verwenden.
 */
.team-wall{background:#161616;border-top:3px solid #d9141b;padding:50px 20px 70px;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;box-sizing:border-box;}
.team-wall .tw-group{position:relative;max-width:1400px;margin:0 auto 38px;container-type:inline-size}
.team-wall .tw-group:last-child{margin-bottom:0}
.team-wall .tw-heading{position:relative;z-index:0;display:block;margin:0 0 16px;padding:0;color:#969696;font-family:'Oswald',Helvetica,Arial,sans-serif;font-weight:700;font-size:min(5.2cqw,72px);line-height:1;letter-spacing:1px;text-transform:uppercase;text-align:left;pointer-events:none;-webkit-user-select:none;user-select:none}
.team-wall .tw-heading strong{color:#d9141b;font-weight:700}
/* Raster: quadratische Zellen; die grosse 2x2-Kachel wird beim Laden per Skript zufaellig gewaehlt (nur ohne Loch im Raster). */
.tw-grid{position:relative;z-index:1;--gap:14px;--cols:4;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-auto-rows:calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols));grid-auto-flow:dense;gap:var(--gap);justify-content:start;margin:0}
.tw-item{position:relative;display:block;min-width:0;cursor:pointer;opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
.team-wall.tw-animate .tw-item:not(.tw-visible){opacity:0;transform:translateY(16px)}
.tw-item.tw-big{grid-column:span 2;grid-row:span 2}
.tw-item.tw-visible{opacity:1;transform:translateY(0)}
.tw-photo{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;background:#000;border-radius:2px}
.tw-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.tw-item:hover .tw-photo img{transform:scale(1.03)}
.tw-veil{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(217,20,27,.16);opacity:0;transition:opacity .35s ease}
.tw-item:hover .tw-veil{opacity:1}
.tw-item:focus-visible .tw-photo{outline:2px solid #d9141b;outline-offset:-2px}
.tw-hint{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.32);color:#fff;font-size:14px;line-height:20px;text-align:center;pointer-events:none;opacity:.85;transition:transform .3s ease,background .3s ease,border-color .3s ease,opacity .3s ease}
.tw-item:hover .tw-hint{opacity:1;transform:scale(1.4);background:#d9141b;border-color:#d9141b}
.tw-caption{position:absolute;left:0;right:0;bottom:0;padding:46px 14px 12px;background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.8) 40%,rgba(0,0,0,0) 100%);border-radius:0 0 2px 2px;pointer-events:none}
.tw-name{color:#fff;font-family:'Oswald',Helvetica,Arial,sans-serif;font-weight:600;font-size:17px;letter-spacing:.2px;line-height:1.25;margin:0;overflow-wrap:anywhere;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.tw-item.tw-big .tw-caption{padding:90px 20px 18px}
.tw-item.tw-big .tw-name{font-size:26px}
.tw-role{display:none}
.tw-tags{display:none}
/* Overlay */
.tw-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,10,10,.97);z-index:999999;display:none;align-items:center;justify-content:center;padding:30px;box-sizing:border-box;overflow-y:auto}
.tw-overlay.tw-open{display:flex}
.tw-overlay-box{background:#1c1c1c;max-width:980px;width:100%;max-height:88dvh;display:flex;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.tw-overlay-photo{flex:0 0 42%;background:#000}
.tw-overlay-photo img{width:100%;height:100%;object-fit:cover;display:block}
.tw-overlay-text{flex:1;padding:44px 48px;overflow-y:auto;color:#e6e6e6}
.tw-overlay-text h3{color:#fff;font-family:'Oswald',Helvetica,Arial,sans-serif;font-weight:600;font-size:25px;margin:0 0 4px;letter-spacing:.2px}
.tw-overlay-role{color:#d9141b;font-size:12.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-bottom:3px}
.tw-overlay-tags{color:#8c8c8c;font-size:12.5px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,.1)}
.tw-overlay-text p{line-height:1.8;font-size:15.5px;margin:0 0 16px;max-width:58ch}
.tw-overlay-text:focus-visible{outline:2px solid #d9141b;outline-offset:-4px}
.tw-close{position:absolute;top:18px;right:24px;background:none;border:none;color:#fff;font-size:32px;line-height:1;cursor:pointer;opacity:.7}
.tw-close:hover{opacity:1}
@media (max-width:989px){
  .tw-grid{--cols:3;--gap:12px}
}
@media (max-width:600px){
  .team-wall{padding-left:14px;padding-right:14px}
  .team-wall .tw-heading{font-size:9cqw;margin-bottom:12px}
  .tw-grid{--cols:2;--gap:10px}
  .tw-caption{padding:34px 10px 9px}
  .tw-name{font-size:14px}
  .tw-item.tw-big .tw-caption{padding:60px 14px 12px}
  .tw-item.tw-big .tw-name{font-size:20px}
  .tw-hint{width:19px;height:19px;font-size:12px;line-height:17px;top:8px;right:8px}
  .tw-overlay{padding:0}
  .tw-overlay-box{flex-direction:column;max-height:100dvh;height:100%;width:100%}
  .tw-overlay-photo{flex:0 0 260px}
  .tw-overlay-text{padding:28px 22px}
}
@media (prefers-reduced-motion: reduce){
  .tw-item,.team-wall.tw-animate .tw-item:not(.tw-visible){opacity:1;transform:none;transition:none}
}