/* BEYS 25.10.26 · actual visual implementation of design, not only a demo. */
.hero { background: linear-gradient(110deg, #f7f4ef 0%, #f6f3ee 72%); }
.hero:before { opacity:.40; right:-6vw; }
.hero-grid { isolation:isolate; align-items:start; }
.beys-hero-illustration {
  position:absolute; z-index:-1; pointer-events:none;
  left:-11%; top:-58px; bottom:-64px; width:72%;
  overflow:hidden; border-radius:0 0 140px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.40) 32%, #000 65%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.40) 32%, #000 65%, transparent 100%);
  opacity:.63;
}
.beys-hero-illustration:after { content:"";position:absolute;inset:0;background:linear-gradient(0deg,#f6f3ee 0%,transparent 28%,transparent 74%,#f6f3ee 100%); }
.beys-hero-illustration img { width:100%;height:100%;object-fit:cover;object-position:75% 53%;filter:saturate(.77) contrast(.95); }
.hero-copy { position:relative; z-index:1; }
.hero-copy h1 { text-shadow:0 1px 0 rgba(246,243,238,.45); }
/* This wrapper contains BOTH the Twitch link and the admin-controlled lecture details. */
.beys-twitch-panel {
  position:relative; isolation:isolate; overflow:hidden; padding:0 15px 15px;
  border-radius:23px; background:linear-gradient(115deg,#312339 0%,#37263c 60%,#221c2e 100%);
  box-shadow:0 17px 31px rgba(46,33,48,.13); border:1px solid #382b41;
}
.beys-twitch-panel::after {
  content:"";position:absolute;pointer-events:none;z-index:-1;
  width:220px;height:220px;right:-75px;top:-70px;
  border-radius:50%;border:1px solid rgba(255,255,255,.065);
  box-shadow:0 0 0 37px rgba(255,255,255,.018),0 0 0 78px rgba(255,255,255,.015);
}
.beys-twitch-panel .channel.twitch {
  position:relative;margin:0; min-height:93px; padding:16px 4px;
  border:0!important; border-radius:0;background:transparent!important; box-shadow:none!important;
}
.beys-twitch-panel .channel.twitch .channel-title {font-size:19px;letter-spacing:-.02em;}
.beys-twitch-panel .channel.twitch .channel-icon{width:52px;height:52px;background:#8957b4;color:#fff;border-radius:16px;}
.beys-twitch-panel .sunday-live-card {
  margin:0; border:1px solid rgba(229,208,180,.47);background:#f9f3e9; border-radius:13px;
  box-shadow:0 7px 17px rgba(16,11,23,.09);
}
.beys-twitch-panel .sunday-live-card .weekly-notice {padding:12px 15px 9px;gap:11px;}
.beys-twitch-panel .weekly-notice-icon{background:#e8d5b9;color:#78593c;width:33px;height:33px;}
.beys-twitch-panel .weekly-notice-icon svg {width:17px;height:17px;}
.beys-twitch-panel .weekly-notice-text strong {font-size:11.3px;}
.beys-twitch-panel .weekly-notice-text span {font-size:10px;}
.beys-twitch-panel .lecture-next {margin:0 15px;padding:10px 0 12px;}
.beys-twitch-panel .lecture-next-eyebrow {font-size:9px;margin-bottom:5px;}
.beys-twitch-panel .lecture-next-date {font-size:15px;}
.beys-twitch-panel .lecture-next-topic {font-size:11px;line-height:1.47;margin:4px 0 0;}
.beys-twitch-panel .sunday-live-card.is-empty .weekly-notice {padding:12px 15px 10px;}
.beys-twitch-panel .sunday-live-card.is-empty .lecture-next {padding:9px 0 11px;}
.beys-twitch-panel .channel.twitch .beys-twitch-live-pill{right:3px;top:2px;}
/* Actual logo and recognizable social brand colors. */
.youtube-group {background:linear-gradient(135deg,#fff4ef 0%,#fffafa 82%);border-color:#f0d7ce;}
.youtube-group>.channel.youtube {min-height:95px;}
.instagram-group {background:linear-gradient(135deg,#fff7fc 0%,#fffdfc 92%);border-color:#ecdce9;}
.instagram-group .instagram-feed-wrap {border-color:#f0e2ed;}
.channel.youtube .beys-official-yt {background:#fde8e4!important;color:#E62117;width:58px;height:58px;border-radius:17px;}
.channel.youtube .beys-official-yt svg {width:34px;height:34px;}
.channel.instagram .beys-official-ig {background:linear-gradient(38deg,#fbb247 1%,#e9477e 49%,#9544bf 100%)!important;color:white;width:58px;height:58px;border-radius:17px;}
.channel.instagram .beys-official-ig svg {width:31px;height:31px;}
.youtube-group .beys-youtube-name {font-size:13px;line-height:1.45;max-height:none;-webkit-line-clamp:3;}
/* An illustrated archive – the original file drawer remains operable. */
#unterlagen {position:relative; overflow:hidden; background:linear-gradient(90deg,#f7f4ef 0%,#f7f4ef 60%,#efe5d7 100%);}
#unterlagen>.container {position:relative;isolation:isolate;}
.beys-archive-scene {position:absolute;right:-8px;top:-62px;width:260px;height:187px;opacity:.37;z-index:-1;pointer-events:none;transform:rotate(-1deg);}
.beys-archive-scene img{height:100%;width:100%;object-fit:contain;}
#unterlagen .beys-library-entry {background:linear-gradient(92deg,rgba(255,253,249,.99) 0%,rgba(255,252,247,.98) 73%,rgba(249,238,221,.90) 100%);}
#unterlagen .beys-library-entry::after {content:"";position:absolute;right:28px;top:4px;width:178px;height:100%;background:url('/assets/beys-bibliothek.svg') center/contain no-repeat;opacity:.17;pointer-events:none;}
#unterlagen .beys-library-arrow {z-index:1;}
@media(min-width:901px){
 .hero-grid{gap:clamp(48px,5vw,90px)}
 .hero-copy{padding-top:clamp(30px,8vh,120px);}
 .social-hero{position:relative;z-index:2;}
}
@media(max-width:900px){
 .beys-hero-illustration{left:0;top:18px;bottom:auto;width:100%;height:360px;opacity:.39;
   -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 63%,transparent 100%);
   mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 63%,transparent 100%);}
 .beys-hero-illustration img{object-position:75% 50%;}
 .hero-copy{padding-top:21px;}
 .beys-archive-scene{right:5px;top:-38px;width:175px;height:140px;opacity:.22;}
}
@media(max-width:480px){
 .beys-hero-illustration{height:350px;opacity:.35;}
 .beys-twitch-panel{padding:0 12px 12px;border-radius:20px;}
 .beys-twitch-panel .channel.twitch{min-height:77px;padding:11px 2px;}
 .beys-twitch-panel .channel.twitch .channel-icon{width:47px;height:47px;}
 .channel.youtube .beys-official-yt,.channel.instagram .beys-official-ig{width:54px;height:54px;}
 .beys-twitch-panel .weekly-notice-text strong{font-size:11px;}
 #unterlagen .beys-library-entry::after{opacity:.10;right:5px;width:90px;}
}
@media(prefers-reduced-motion:reduce){.beys-twitch-panel::after{animation:none;}}


/* BEYS · final visual refinement · 25 October 2026
   Existing brand assets, admin functions and public API integrations retained. */
@media (min-width: 1100px) {
  .container { width: min(calc(100% - 88px), 1260px); }
  .hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(55px, 5.2vw, 84px); }
  .hero-copy { top: clamp(125px, 16vh, 210px); padding-top: clamp(22px, 6vh, 75px); }
  .hero-copy h1 { font-size: clamp(69px, 5.5vw, 87px); }
  .hero-desc { max-width: 500px; }
  .hero { padding-top: 60px; padding-bottom: 82px; }
}
@media (min-width: 1550px) {
  .hero { padding-top: 70px; }
}
/* Actual crisp architecture, color-rich on the right and faded beneath lettering. */
.hero { background: #f7f4ef; }
.beys-hero-illustration {
  left: -8%; width: 76%; top: -48px; bottom: -52px;
  opacity: .95; border-radius: 0;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.17) 0%, rgba(0,0,0,.36) 21%, #000 50%, #000 79%, transparent 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.17) 0%, rgba(0,0,0,.36) 21%, #000 50%, #000 79%, transparent 100%);
}
.beys-hero-illustration img {
  filter:none; object-position: 75% 52%;
  image-rendering:auto;
}
.beys-hero-illustration::after {
  background:linear-gradient(0deg,#f7f4ef 0%,transparent 21%,transparent 83%,#f7f4ef 100%),
    linear-gradient(90deg,rgba(247,244,239,.45) 0%,rgba(247,244,239,.22) 40%,transparent 80%);
}
.hero-copy h1 {text-shadow:0 1px 0 rgba(247,244,239,.50), 0 0 23px rgba(247,244,239,.15);}
.hero-copy .hero-desc { position:relative; color:#55514e; font-weight:450; }
.hero:before { opacity:.23; }
/* Archive: ONE illustration, inside the library entry only; no duplicate above title. */
#unterlagen {background:#f7f4ef;}
#unterlagen .beys-archive-scene {display:none!important;}
#unterlagen .beys-library-entry {
 background:linear-gradient(94deg,#fffdfa 0%,#fffdfa 65%,#f5eadc 100%);
 border:1px solid #e1d5c5; min-height:146px;
}
#unterlagen .beys-library-entry::after {
 right:68px; top:0; bottom:0; height:100%; width:215px;
 background:url('/assets/beys-bibliothek.svg') center/contain no-repeat;
 opacity:.27;
 -webkit-mask-image:linear-gradient(90deg,transparent,black 48%);
 mask-image:linear-gradient(90deg,transparent,black 48%);
}
#unterlagen .beys-library-copy {position:relative;z-index:1;}
#unterlagen .beys-library-arrow {position:relative;z-index:1;}
/* Premium Twitch overlay: authentic Twitch iframe+chat, no faux screenshots. */
.beys-live-dialog {
 width:min(1250px, calc(100vw - 40px));
 background:#f8f5ef; border:1px solid #a99a8e; border-radius:23px;
 box-shadow:0 34px 110px rgba(12,10,17,.56);
 max-height:min(94dvh, 940px);
}
.beys-live-dialog::backdrop{ background:rgba(18,15,23,.82);backdrop-filter:blur(8px); }
.beys-live-top {
 background:linear-gradient(110deg,#29212e 0%,#33283a 72%,#3b2b42 100%);
 border-bottom:1px solid #49374d; padding:19px 23px; color:#fffaf5;
}
.beys-live-heading{gap:15px;}
.beys-live-logo {width:46px;height:46px;object-fit:contain;background:#faf7f1;border-radius:50%;padding:2px;flex:none;}
.beys-live-kicker {display:block;font-size:9px;font-weight:800;letter-spacing:.22em;color:#d7bca0;margin-bottom:4px;}
.beys-live-mainline{display:flex;align-items:center;gap:10px;}
.beys-live-heading h2 {color:#fffaf7;font:500 clamp(25px,3vw,34px)/1.1 var(--serif);margin:0;letter-spacing:-.025em;}
.beys-live-heading small{font-size:11px;color:#ddcfda;margin-top:4px;}
.beys-live-dot {height:8px;width:8px;flex:none;background:#eb615b;box-shadow:0 0 0 4px rgba(234,100,92,.15);}
.beys-live-status {margin-left:auto;white-space:nowrap;font-size:10px;font-weight:850;letter-spacing:.09em;color:#f8dad1;background:#8b3540;border:1px solid rgba(255,255,255,.13);border-radius:30px;padding:7px 11px;}
.beys-live-close {height:43px;width:43px;flex:none;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:white;border-radius:12px;transition:background .18s;}
.beys-live-close:hover {background:rgba(255,255,255,.21);}
.beys-live-grid {grid-template-columns:minmax(0,1fr) minmax(295px,336px);gap:14px;padding:18px;}
.beys-live-player {background:#19151d;border:1px solid #3d3340;border-radius:15px;min-height:465px;}
.beys-live-player iframe {min-height:465px;}
.beys-live-chat {border:1px solid #e4dbd0;border-radius:15px;display:flex;flex-direction:column;}
.beys-live-chat-head {background:#f0e9df;border-bottom:1px solid #e4d9cc;padding:13px 15px;}
.beys-live-chat-content {height:auto;flex:1;min-height:422px;}
.beys-live-bottom {display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 22px 21px;color:#746b64;font-size:11px;}
.beys-live-bottom a {display:inline-block;border:1px solid #cdbdb0;border-radius:9px;padding:9px 13px;white-space:nowrap;text-decoration:none;background:#fffdfa;color:#4b373e;}
.beys-live-bottom a:hover {border-color:#a28675;background:#f3eadd;}
/* Preview mode test page: no Twitch network loaded, no fake live API. */
.beys-live-preview-page .beys-intro {display:none!important;}
.beys-live-is-preview .beys-live-status {background:#5f5261;color:#fff4e2;}
.beys-live-is-preview .beys-live-dot{background:#c3a17b;box-shadow:0 0 0 4px rgba(195,161,123,.17);}
.beys-live-placeholder {min-height:465px;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:13px;padding:28px;color:#fff7f0;background:
 radial-gradient(ellipse at 50% 40%,rgba(126,87,121,.36),transparent 65%),
 linear-gradient(135deg,#271f2c 0%,#18151c 100%);}
.beys-live-placeholder>img {width:65px;height:65px;border-radius:50%;background:white;padding:4px;margin-bottom:7px;}
.beys-live-placeholder>strong {font:500 clamp(23px,3vw,37px)/1.1 var(--serif);}
.beys-live-placeholder p {font-size:13px;line-height:1.65;color:#e0d7df;max-width:330px;margin:0;}
.beys-live-preview-tag {border:1px solid #b7a4b9;border-radius:40px;padding:6px 12px;font-size:9px;letter-spacing:.13em;margin-top:5px;}
.beys-live-chat-placeholder {height:100%;min-height:422px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px;text-align:center;gap:10px;background:#fffdfa;}
.beys-live-chat-placeholder strong{font:500 26px/1.2 var(--serif);}
.beys-live-chat-placeholder p{font-size:12px;color:#7e7168;line-height:1.7;max-width:215px;}
@media (max-width: 900px) {
 .beys-hero-illustration {left:5%;top:8px;bottom:auto;width:95%;height:430px;opacity:.89;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.38) 38%,#000 82%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.38) 38%,#000 82%);}
 .beys-hero-illustration::after {background:linear-gradient(0deg,#f7f4ef 0%,transparent 22%,transparent 78%,#f7f4ef 100%),linear-gradient(90deg,rgba(247,244,239,.56),transparent 68%);}
 .hero-copy {position:relative;padding-top:21px;}
 .beys-live-grid {grid-template-columns:1fr;}
 .beys-live-chat-content {min-height:360px;max-height:410px;}
 .beys-live-chat[hidden],.beys-live-chat-content[hidden] {display:none!important;}
}
@media (max-width: 700px) {
 .beys-hero-illustration {height:400px;left:3%;width:97%;opacity:.85;}
 .beys-hero-illustration img {object-position:72% 50%;}
 .hero-copy .hero-desc {color:#514d4a;}
 #unterlagen .beys-library-entry {min-height:0;}
 #unterlagen .beys-library-entry::after {display:none;}
 .beys-live-dialog {width:calc(100vw - 18px);border-radius:16px;}
 .beys-live-top {padding:13px 14px;gap:8px;}
 .beys-live-logo {width:36px;height:36px;}
 .beys-live-kicker {font-size:7px;letter-spacing:.14em;}
 .beys-live-heading h2 {font-size:23px;}
 .beys-live-status {font-size:8px;padding:5px 7px;}
 .beys-live-close {height:35px;width:35px;font-size:23px;}
 .beys-live-grid{padding:11px;gap:11px;}
 .beys-live-player,.beys-live-player iframe,.beys-live-placeholder{min-height:310px;}
 .beys-live-chat-content,.beys-live-chat-placeholder {min-height:300px;}
 .beys-live-bottom{padding:0 13px 15px;flex-wrap:wrap;}
}
@media (max-width: 380px) {
 .beys-hero-illustration{height:350px;}
 .beys-live-status{display:none;}
}
@media (prefers-reduced-motion:reduce) {
 .beys-live-close {transition:none!important;}
}


/* Final mobile live-preview fit: a real phone has limited dialog header width. */
@media (max-width:470px) {
 .beys-live-top{padding:12px; gap:7px;}
 .beys-live-heading{gap:9px;}
 .beys-live-logo{width:34px;height:34px;}
 .beys-live-heading h2{font-size:19px;line-height:1.14;letter-spacing:-.03em;}
 .beys-live-heading small{font-size:9px;line-height:1.45;}
 .beys-live-kicker{font-size:7px;letter-spacing:.10em;}
 .beys-live-status{display:none!important;}
 .beys-live-close{width:35px;height:35px;}
}

/* BEYS · hero body copy readability · revised October 25, 2026
   Normal-weight text, strong contrast, NO white badge/patch over the photograph.
   Preserve the original architecture and display type. */
.hero-copy .hero-desc {
  position: relative;
  color: #342f2b;
  font-weight: 400;
  line-height: 1.76;
  letter-spacing: 0;
  text-shadow: 0 1px 1px rgba(255,252,247,.30);
  isolation: auto;
}
/* Previous hard reset of the paragraph halo removed; final feathered glow below. */
@media (max-width: 900px) {
  .hero-copy .hero-desc {
    color: #332d28;
    font-weight: 400;
    line-height: 1.77;
    text-shadow: 0 1px 2px rgba(255,253,248,.38);
  }
}
@media (max-width: 700px) {
  .hero-copy .hero-desc { font-size: 14.5px; line-height: 1.78; max-width: 100%; }
}
@media (max-width: 375px) {
  .hero-copy .hero-desc { font-size: 14px; }
}



/* BEYS Live-Vorschau + typografischer Feinschliff — 25.10.2026.
   Echte Live-Bilder kommen ausschließlich aus der Twitch API; kein Auto-Playback. */
.beys-stream-peek[hidden],.beys-preview-label[hidden]{display:none!important}
.beys-stream-peek{display:block;position:relative;overflow:hidden;margin:13px 0 0;border-radius:15px;background:#241d2a;
 border:1px solid rgba(255,255,255,.23);color:#fff;text-decoration:none;box-shadow:0 8px 18px rgba(18,11,25,.15);
 transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease}
.beys-stream-cover{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;
 background:radial-gradient(ellipse at 63% 25%,#604064 0%,#2a2033 55%,#211a27 100%)}
.beys-stream-cover::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(0deg,rgba(19,13,23,.50),transparent 54%,rgba(22,14,28,.1))}
.beys-stream-image{display:block;width:100%;height:100%;object-fit:cover}
.beys-stream-image[hidden]{display:none!important}
.beys-stream-fallback{display:flex;position:absolute;inset:0;align-items:center;justify-content:center;flex-direction:column;gap:7px;color:#fbf5f0;
 font:500 22px var(--serif);text-shadow:0 3px 13px rgba(0,0,0,.25)}
.beys-stream-fallback img{width:47px;height:47px;border-radius:50%;background:#fff;padding:3px}
.beys-stream-image:not([hidden]) + .beys-stream-fallback{display:none!important}
.beys-stream-play{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);
 width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:rgba(255,252,246,.95);
 color:#38293b;border:1px solid rgba(255,255,255,.55);box-shadow:0 7px 24px rgba(9,8,15,.32);
 transition:transform .25s ease,background .25s ease}
.beys-stream-play svg{width:29px;height:29px;margin-left:3px}
.beys-stream-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 13px;
 background:linear-gradient(115deg,#35283b,#302336)}
.beys-stream-footer strong{display:block;color:#fff;font-size:13px;line-height:1.35;font-weight:750}
.beys-stream-footer small{display:block;margin-top:3px;color:#d9cddc;font-size:10px;line-height:1.3}
.beys-stream-cta{color:#ead8e7;font-size:19px;font-weight:650;line-height:1;white-space:nowrap}
.beys-preview-label{display:block;position:absolute;top:12px;left:12px;z-index:3;border:1px solid #d4c0b1;
 border-radius:4px;padding:6px 9px;background:#fcf2e9;color:#593d3b;font-size:10px;font-weight:850;letter-spacing:.06em}
.beys-twitch-panel.beys-panel-live .lecture-next-badge[data-status="live"]{color:#783f65}
.beys-twitch-panel.beys-panel-live .lecture-next-badge[data-status="live"] .lecture-status-dot{background:#b0476d;box-shadow:0 0 0 3px rgba(176,71,109,.15);animation:none}
.beys-twitch-panel.beys-panel-live .beys-twitch-live-pill {background:#ffe8df;color:#7e2830}
.beys-twitch-panel.beys-panel-live .channel.twitch .beys-twitch-live-pill{position:absolute;top:9px;right:3px;z-index:3}
.beys-twitch-panel.beys-panel-live .channel.twitch{padding-right:84px}
.beys-twitch-panel.beys-panel-live .channel-arrow{display:none!important}
.beys-twitch-panel.beys-panel-live .channel.twitch{width:100%}
/* The paragraph sits on an extremely soft feathered ivory halo; no hard rectangle, no font outline.
   The composition stays readable against the arch while preserving the original illustration. */
.hero-copy .hero-desc{position:relative;z-index:0;isolation:isolate;color:#2e2926;font-weight:400;
 line-height:1.76;text-shadow:0 1px 2px rgba(255,252,247,.78),0 0 9px rgba(255,252,247,.28)}
.hero-copy .hero-desc::before{content:""!important;position:absolute;z-index:-1;pointer-events:none;
 inset:-19px -27px;filter:blur(8px);border-radius:50%;
 background:radial-gradient(ellipse at 36% 50%,rgba(250,247,242,.65) 0%,rgba(250,247,242,.42) 46%,rgba(250,247,242,.13) 75%,transparent 100%)}
@media(hover:hover) and (pointer:fine){.beys-stream-peek:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(18,11,25,.22)}.beys-stream-peek:hover .beys-stream-play{transform:translate(-50%,-50%) scale(1.08);background:white}}
@media(max-width:700px){
 .hero-copy .hero-desc{font-size:clamp(15px,3.55vw,16px);line-height:1.8;letter-spacing:-.005em;max-width:38ch}
 .hero-copy .hero-desc::before{inset:-17px -17px;filter:blur(11px);background:radial-gradient(ellipse at 31% 52%,rgba(250,248,242,.72),rgba(250,248,242,.38) 57%,transparent 95%)}
 .beys-stream-peek{border-radius:13px;margin-top:12px}
 .beys-stream-footer{padding:11px 12px}
 .beys-stream-play{width:50px;height:50px}
 .beys-stream-play svg{width:25px;height:25px}
 .beys-stream-footer strong{font-size:13px}
 .beys-stream-fallback{font-size:19px}
}
@media(max-width:365px){.beys-twitch-panel.beys-panel-live .channel.twitch{padding-right:77px}.hero-copy .hero-desc{font-size:14px;max-width:100%}}
@media(prefers-reduced-motion:reduce){.beys-stream-peek,.beys-stream-play{transition:none!important}}


/* BEYS · Bogenarchitektur (Option C) · 25 Oct 2026
   Own architectural SVG, not the illustrative mock-up or an oversized photo.
   Text and all features stay unchanged. */
.hero { background:#f7f4ef; }
.hero:before { opacity:.11; }
.hero-grid { isolation:isolate; }
.beys-hero-illustration {
  z-index:-1;
  left:29%; right:auto; top:18px; bottom:40px;
  width:clamp(290px,32%,450px); height:auto;
  max-height:none;
  opacity:.62; border-radius:0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 26%,#000 58%),linear-gradient(0deg,transparent 0%,#000 14%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 26%,#000 58%),linear-gradient(0deg,transparent 0%,#000 14%,#000 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.beys-hero-illustration::after {content:none!important;display:none!important;}
.beys-hero-illustration img {
  display:block;width:100%;height:100%;object-fit:contain;
  object-position:center center;filter:none;
}
.hero-copy {z-index:1;}
.hero-copy .hero-desc {font-weight:400;color:#39332f; text-shadow:none;}
.hero-copy .hero-desc::before {content:none!important;display:none!important;}
@media (min-width:901px) {
  .beys-hero-illustration {left:28%;top:35px;bottom:58px;width:min(34%,460px);opacity:.70;}
  .hero-copy {z-index:1;}
  .social-hero {z-index:2;}
}
@media (min-width:1500px) {
  .beys-hero-illustration {left:30%;width:30%;opacity:.65;}
}
@media (max-width:900px) {
  .beys-hero-illustration {
    left:auto;right:-8%;top:18px;bottom:auto;
    width:min(54vw,330px);height:clamp(350px,90vw,520px);
    opacity:.41;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.27) 34%,#000 86%),linear-gradient(0deg,transparent 0%,#000 18%,#000 76%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.27) 34%,#000 86%),linear-gradient(0deg,transparent 0%,#000 18%,#000 76%,transparent 100%);
  }
  .hero-copy {z-index:1;}
}
@media (max-width:700px) {
  .beys-hero-illustration {right:-15%;top:5px;width:61vw;height:390px;opacity:.45;}
  .hero-copy .hero-desc {color:#312d2b; text-shadow:none;}
}
@media (max-width:380px) {
  .beys-hero-illustration {right:-20%;width:66vw;opacity:.40;height:350px;}
}


/* BEYS · 04.11.2026: clean, opaque controls and clear separation of the three media cards.
   Keep Twitch, YouTube and Instagram as separate visual surfaces; don't alter their interiors. */
.beys-live-unavailable {margin:9px 2px 0;color:#e2c7da;font-size:11px;line-height:1.5;font-weight:650;}
.beys-live-unavailable[hidden]{display:none!important;}
.site-header{background:#f6f3ee; -webkit-backdrop-filter:none;backdrop-filter:none; box-shadow:none;}
/* Exact, intentionally visible distance between full cards, not the video rows inside them. */
.social-hero > .channel-list,
.social-hero > .youtube-group {margin-bottom:20px;}
.social-hero > .channel-list,
.social-hero > .youtube-group,
.social-hero > .instagram-group {min-width:0;}
@media(max-width:700px){.social-hero > .channel-list,.social-hero > .youtube-group {margin-bottom:16px;}}

.beys-display-block{display:block}