/* Liquid-Glas: Hero (WebGL, Zeichnung im Canvas) und Milchglas-Rückfall.
   Unschärfe höchstens 18 px, keine gestapelten Gläser, Text mindestens 4,5:1. */
:root{--glass-edge:rgba(250,248,245,.30);--glass-r:22px;--glass-r-in:14px;--glass-ink:#faf8f5;--glass-copper:#f2bf98}
.glass{position:relative;border-radius:var(--glass-r);border:1px solid var(--glass-edge);background:rgba(20,18,16,.9);color:var(--glass-ink)}
/* Milchglas für alles unterhalb des Heros und ohne WebGL */
.glass--milk,.nogl .glass{background:rgba(20,18,16,.62);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
@media (prefers-reduced-transparency:reduce){.glass--milk,.nogl .glass{background:#141210;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-contrast:more){.gl-on .glass,.glass--milk,.nogl .glass{background:#141210;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---------- Hero ---------- */
.ghero{--z:.86;--ar:1.3333;--cx:66%;--cy:50%;position:relative;isolation:isolate;overflow:clip;background:#0e0d0c;display:flex;align-items:center;min-height:clamp(700px,100svh,900px);padding-top:var(--nav-h,72px);border-bottom:1px solid var(--line)}
.ghero-stage{position:absolute;inset:0;z-index:-1;container-type:size;overflow:hidden}
/* Skulptur ganz sichtbar (Bild im Verhältnis --ar (Clip A 4:3), Höhe min(Breite,Höhe) x --z), Mitte bei --cx/--cy, Ränder weich ins Schwarz. Der Shader liest die Lage dieses Bildes. */
.ghero-poster{display:block;position:absolute;inset:0}
.ghero-poster img,.ghero.nogl video{--d:calc(min(100cqw,100cqh)*var(--z));position:absolute;width:calc(var(--d)*var(--ar));height:var(--d);max-width:none;left:calc(var(--cx) - var(--d)*var(--ar)*.5);top:calc(var(--cy) - var(--d)*.5);object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(transparent,#000 10%,#000 90%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(transparent,#000 10%,#000 90%,transparent);mask-composite:intersect}
.ghero-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.ghero-gl{opacity:0;transition:opacity .4s ease}
.ghero.gl-on .ghero-gl{opacity:1}
.ghero.gl-on .ghero-poster{visibility:hidden;transition:visibility 0s linear .4s}
.ghero video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
/* Ohne WebGL: Video sichtbar, derselbe Ausschnitt wie das Poster */
.ghero.nogl video{opacity:0;transition:opacity .45s ease}
.ghero.nogl.is-playing video{opacity:1}
.ghero-inner{position:relative;width:100%;padding-block:clamp(40px,7vw,88px)}
.ghero-box{width:min(580px,100%);padding:clamp(22px,3vw,36px)}
/* Vor der WebGL-Brechung sofort Milchglas, danach weich zur Brechung (400 ms) */
.ghero-box{background:rgba(20,18,16,.62);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
.gl-on .ghero-box{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background .4s ease}
@media (prefers-reduced-transparency:reduce){.ghero:not(.gl-on) .ghero-box{background:#141210;-webkit-backdrop-filter:none;backdrop-filter:none}}
.ghero-box .eyebrow{display:flex;align-items:center;gap:10px;color:var(--glass-copper);font-size:11px;letter-spacing:.14em}
.ghero-box .eyebrow::before{content:"";width:6px;height:6px;border:1px solid currentColor;transform:rotate(45deg);flex:none}
.ghero-box h1{font-size:clamp(34px,3.9vw,54px);line-height:1.08;font-weight:600;letter-spacing:-.05em;margin:14px 0 20px;color:var(--glass-ink);text-wrap:initial}
.ghero-box h1>span{display:block}
.ghero-box h1 .tsam-copper{color:var(--glass-copper)}
.ghero-lead{font-size:clamp(15px,1.25vw,17px);line-height:1.65;color:#e4ded6;max-width:46ch}
.ghero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.ghero-actions .btn-accent{background:#dfa171;color:#1c1713;border-color:#dfa171}
.ghero-actions .btn-ghost{background:rgba(250,248,245,.06);border-color:rgba(250,248,245,.45);color:var(--glass-ink)}
.ghero-note{font-size:13px;color:#d6cfc6;margin-top:14px}
.ghero-person{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:13px;color:#d6cfc6;line-height:1.5}
.ghero-person img{width:38px;height:38px;object-fit:cover;object-position:center 25%;border-radius:50%}
.ghero-person strong{display:block;font-weight:600;color:var(--glass-ink)}
.ghero-chip{display:inline-block;margin-top:18px;padding:8px 14px;border-radius:999px;border:1px solid var(--glass-edge);font-size:12px;letter-spacing:.04em;color:#ece5dc}
.ghero-pause{position:absolute;right:max(16px,var(--gutter,16px));bottom:16px;min-width:44px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(250,248,245,.4);background:rgba(14,13,12,.72);color:var(--glass-ink);font:600 13px/1 inherit;cursor:pointer}
.ghero-pause[hidden]{display:none}
.ghero-pause:focus-visible,.ghero-actions .btn:focus-visible{outline:2px solid var(--glass-copper);outline-offset:3px}
@media (max-width:767px){
  .ghero{--z:.95;--cx:50%;--cy:270px;align-items:flex-end;padding-top:370px;min-height:max(700px,100svh)}
  .ghero-inner{padding-block:24px 56px}
  .ghero-box{padding:20px}
  .ghero-box h1{font-size:clamp(30px,8.4vw,40px);margin:10px 0 14px}
  .ghero-actions .btn{flex:1;white-space:nowrap}
}

/* Header: Milchglas steht seitenweit in site.css; auf der Startseite reicht der Hero unter den Header. */
.tsam-home header.site-header{margin-bottom:calc(var(--nav-h,72px)*-1)}