/* BEYS 2026: ruhiger Markenauftakt, schnelle, respektvolle Bewegung */
.beys-intro{display:none}
.beys-intro-active .beys-intro{display:flex;position:fixed;z-index:9999;inset:0;background:#f6f3ee;align-items:center;justify-content:center;flex-direction:column;gap:19px;pointer-events:none;animation:beys-intro-out .5s 2.35s forwards}
.beys-intro-brand{width:86px;height:86px;border-radius:50%;border:1px solid #d5c6b8;box-shadow:0 0 0 10px rgba(176,140,100,.045);animation:beys-intro-in .63s cubic-bezier(.18,.82,.25,1) both}
.beys-intro-title{font:600 21px/1.25 var(--serif);color:#3b3031;letter-spacing:.018em;animation:beys-intro-in .58s .22s both}
.beys-intro-rule{width:0;height:1px;background:#b08c64;animation:beys-intro-rule .75s .40s both}
@keyframes beys-intro-in{from{opacity:0;transform:translateY(14px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes beys-intro-rule{to{width:86px}}
@keyframes beys-intro-out{to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:no-preference){.hero-copy h1{animation:beys-hero-arrive .72s .04s both}.hero-copy .eyebrow{animation:beys-hero-arrive .62s both}.hero-copy .hero-desc{animation:beys-hero-arrive .72s .10s both}.social-hero .channel-list>.channel{transition:transform .28s cubic-bezier(.2,.75,.28,1),box-shadow .28s,border-color .2s}}
@keyframes beys-hero-arrive{from{opacity:.28;transform:translateY(11px)}to{opacity:1;transform:translateY(0)}}
/* Twitch's channel card becomes the direct entrance into the BEYS player when live */
.channel.twitch{overflow:hidden}.beys-twitch-live-pill{display:none;position:absolute;top:9px;right:10px;border-radius:50px;background:#fff1e9;color:#8d3030;font-size:9px;font-weight:850;letter-spacing:.07em;padding:3px 8px}
.channel.twitch.beys-is-live .beys-twitch-live-pill{display:inline-flex;align-items:center;gap:5px}
.beys-twitch-live-pill:before{content:'';background:#d44a39;width:6px;height:6px;border-radius:50%;box-shadow:0 0 0 3px rgba(212,74,57,.16)}
/* Latest YouTube uploads: two real small cards, no embedded tracking/player until click */
.beys-youtube-latest{grid-column:1/-1;border:1px solid #e6dfd7;background:#fffdfa;border-radius:17px;padding:14px 15px 15px;min-width:0}
.beys-youtube-latest[hidden]{display:none!important}
.beys-youtube-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:9.5px;font-weight:850;letter-spacing:.12em;color:#85705d;margin-bottom:11px}
.beys-youtube-heading a{letter-spacing:0;font-size:11px;color:#8c7162;text-decoration:underline;text-underline-offset:3px;font-weight:700}
.beys-youtube-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.beys-youtube-video{display:block;min-width:0;border-radius:13px;overflow:hidden;border:1px solid #e9e3db;background:#f8f4ee;transition:transform .2s,box-shadow .2s}
.beys-youtube-video:hover{transform:translateY(-2px);box-shadow:0 9px 18px #33261b12}
.beys-youtube-thumb{display:block;position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#ddd0bf,#f3ebe2)}
.beys-youtube-thumb img{width:100%;height:100%;object-fit:cover}
.beys-youtube-play{position:absolute;top:50%;left:50%;width:32px;height:32px;transform:translate(-50%,-50%);display:grid;place-items:center;background:#342e32df;color:white;border-radius:100%}
.beys-youtube-play svg{height:13px;width:13px;margin-left:2px;fill:currentColor;stroke:none}
.beys-youtube-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:11.5px;line-height:1.37;font-weight:750;margin:10px 10px 11px;min-height:2.75em;color:#3d3534}
/* Twitch player and separate chat, loaded only after click */
.beys-live-dialog{padding:0;border:1px solid #d8cfc4;background:#f9f6f0;border-radius:19px;color:#312b2b;box-shadow:0 24px 80px #1c16243e;width:min(1180px,calc(100vw - 28px));max-width:none;max-height:93dvh;overflow:auto}
.beys-live-dialog::backdrop{background:#17131acc;backdrop-filter:blur(5px)}
.beys-live-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 19px;border-bottom:1px solid #e5ddd2}
.beys-live-heading{display:flex;align-items:center;gap:12px;min-width:0}
.beys-live-dot{height:9px;width:9px;border-radius:50%;background:#bd3e38;box-shadow:0 0 0 4px #bd3e3820}
.beys-live-heading h2{font:500 clamp(23px,3vw,31px)/1.15 var(--serif);margin:0}
.beys-live-heading small{display:block;color:#796d63;font-size:11px}
.beys-live-close{height:41px;width:41px;border:1px solid #ded6c9;background:#fffdfa;color:#463938;border-radius:10px;cursor:pointer;font-size:26px;line-height:1}
.beys-live-grid{padding:15px;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:13px;align-items:stretch}
.beys-live-player{min-height:390px;background:#29242a;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.beys-live-player iframe{border:0;width:100%;height:100%;min-height:390px;display:block}
.beys-live-chat{background:#fffdfa;border:1px solid #e2dad1;border-radius:12px;min-width:0;overflow:hidden}
.beys-live-chat-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;font-size:13px;font-weight:800;color:#443739}
.beys-live-chat-toggle{background:none;border:0;color:#78614f;font-size:12px;font-weight:750;cursor:pointer;display:none}
.beys-live-chat-content{height:400px}.beys-live-chat-content iframe{border:0;display:block;width:100%;height:100%}
.beys-live-bottom{padding:1px 20px 17px;font-size:11px;color:#706963}
.beys-live-bottom a{font-weight:800;text-decoration:underline}
@media(max-width:820px){.beys-live-grid{grid-template-columns:minmax(0,1fr)}.beys-live-player,.beys-live-player iframe{min-height:310px}.beys-live-chat-toggle{display:block}.beys-live-chat-content{height:360px}}
@media(max-width:420px){.beys-live-dialog{width:calc(100vw - 12px);border-radius:13px}.beys-live-top{padding:13px}.beys-live-grid{padding:10px}.beys-live-heading h2{font-size:23px}.beys-live-player,.beys-live-player iframe{min-height:290px}}
@media(prefers-reduced-motion:reduce){.beys-intro-active .beys-intro{display:none!important}.beys-youtube-video,.channel.twitch{transition:none!important}.hero-copy h1,.hero-copy .eyebrow,.hero-copy .hero-desc{animation:none!important}}

/* BEYS October 2026 · unified media surfaces and intentionally readable welcome */
.youtube-group{
  min-width:0;overflow:hidden;border:1px solid #eadcd4;border-radius:24px;
  background:linear-gradient(145deg,#fff8f4 0%,#fffbf9 72%,#fffdfa 100%);
  box-shadow:var(--shadow);scroll-margin-top:112px;
}
.youtube-group>.channel.youtube{
  border:0;border-radius:0;box-shadow:none;background:transparent;
  min-height:104px;transition:background .2s;
}
.youtube-group>.channel.youtube:hover,.youtube-group>.channel.youtube:focus-visible{
  transform:none;box-shadow:none;background:#faeeea;
}
.youtube-group .beys-youtube-latest{
  border:0;border-top:1px solid #ecdcd3;border-radius:0;box-shadow:none;
  background:transparent;padding:16px 19px 20px;
}
.youtube-group .beys-youtube-heading{margin-bottom:12px;color:#93695f;letter-spacing:.13em}
.beys-youtube-update{font-size:10px;letter-spacing:0;color:#9a8780;font-weight:600;text-align:right}
.youtube-group .beys-youtube-video{background:#fffdfa;border-color:#ecdcd4;border-radius:14px}
.youtube-group .beys-youtube-name{-webkit-line-clamp:3;font-size:12px;line-height:1.38;min-height:4.14em;margin:11px 11px 12px}
.youtube-group .channel.youtube .channel-icon{background:#f7e5df;color:#d24a41}
.instagram-group{
  background:linear-gradient(145deg,#fffbfd 0%,#fff8fc 72%,#fffdfa 100%);
  border-color:#e9dce6;
}
.instagram-group>.channel.instagram{background:transparent}
.instagram-group>.channel.instagram:hover{background:#faeff5}
.instagram-group .instagram-feed-wrap{border-top-color:#eadee7}
.instagram-group .channel.instagram .channel-icon{background:#f5e8f1}
/* Empty-state compression without hiding or shortening actual lecture information. */
.sunday-live-card.is-empty .weekly-notice{padding-top:12px;padding-bottom:10px}
.sunday-live-card.is-empty .lecture-next{padding-top:10px;padding-bottom:12px}
.sunday-live-card.is-empty .lecture-next-eyebrow{margin-bottom:3px}
.sunday-live-card.is-empty .lecture-next-date{font-size:14px;line-height:1.32}
.sunday-live-card.is-empty .lecture-next-topic{font-size:11px;line-height:1.4;margin-top:5px}
.sunday-live-card.is-empty .lecture-next-bottom{display:none}
@media(max-width:700px){
 .youtube-group>.channel.youtube{min-height:98px}
 .youtube-group .beys-youtube-latest{padding:14px 14px 16px}
 .youtube-group .beys-youtube-cards{gap:10px}
 .youtube-group .beys-youtube-name{font-size:11.2px;margin:10px 9px 11px}
 .beys-youtube-update{font-size:9px}
}
@media(max-width:365px){.beys-youtube-update{font-size:8px}}
@media(prefers-reduced-motion:no-preference){
 .beys-intro-active .hero-copy h1{animation-delay:2.6s}
 .beys-intro-active .hero-copy .eyebrow{animation-delay:2.5s}
 .beys-intro-active .hero-copy .hero-desc{animation-delay:2.7s}
}

/* BEYS · 2026-10-25: editorial polish + restrained interaction patterns.
   Native CSS/JS, inspired by modern component galleries; no React runtime. */

/* The left introduction remains present as the longer channel column scrolls.
   Avoids the otherwise empty desktop half without introducing filler copy. */
@media (min-width: 901px) {
  .hero-grid { align-items: start; gap: clamp(45px, 5.4vw, 94px); }
  .hero-copy {
    position: sticky;
    top: clamp(132px, 17vh, 204px);
    align-self: start;
    padding-top: clamp(20px, 5.5vh, 70px);
    max-width: 570px;
  }
  .hero { padding-bottom: 76px; }
  .hero-desc { max-width: 475px; }
  .hero-actions { margin-top: 29px; }
}
@media (min-width: 901px) and (max-height: 730px) {
  .hero-copy { top: 104px; padding-top: 12px; }
}

/* YouTube: editorial readability while retaining two current videos. */
.youtube-group .beys-youtube-latest { padding: 18px 20px 22px; }
.youtube-group .beys-youtube-cards { gap: 14px; }
.youtube-group .beys-youtube-video {
  background: #fffdfa;
  border: 1px solid #ebded6;
  box-shadow: 0 2px 5px rgba(56,40,32,.025);
  transition: transform 280ms cubic-bezier(.22,1,.36,1),
              box-shadow 280ms ease, border-color 280ms ease;
}
.youtube-group .beys-youtube-name {
  font-size: 13px;
  font-weight: 750;
  line-height: 1.47;
  min-height: 4.41em;
  -webkit-line-clamp: 3;
  margin: 12px 13px 14px;
  overflow-wrap: anywhere;
}
.youtube-group .beys-youtube-heading { font-size: 10px; margin-bottom: 14px; }
.youtube-group .beys-youtube-thumb { overflow: hidden; }
.youtube-group .beys-youtube-thumb img {
  transition: transform 550ms cubic-bezier(.22,1,.36,1);
}
@media (hover:hover) and (pointer:fine) {
  .youtube-group .beys-youtube-video:hover,
  .youtube-group .beys-youtube-video:focus-visible {
    transform: translateY(-3px);
    border-color: #d6bdb0;
    box-shadow: 0 12px 25px rgba(68,45,35,.095);
  }
  .youtube-group .beys-youtube-video:hover img { transform: scale(1.035); }
}

/* Contact: full-height editorial panel with the note anchored at the base. */
@media (min-width: 701px) {
  .contact-layout { align-items: stretch; gap: 23px; grid-template-columns: minmax(0,.91fr) minmax(0,1.09fr); }
  .contact-aside-panel {
    align-self: stretch;
    justify-content: flex-start;
    min-height: 100%;
    padding: clamp(30px, 3vw, 45px);
  }
  .contact-aside-panel .contact-smallnote {
    margin-top: auto;
    padding-top: 34px;
    max-width: 310px;
  }
  .contact-aside-panel .contact-email { margin-top: 23px; }
  .contact-aside-panel:after {
    content: 'BEYS';
    font: 500 clamp(94px, 10vw, 180px)/1 var(--serif);
    letter-spacing: -.085em;
    right: -13px; bottom: 40px;
    color: rgba(255,255,255,.045);
    transform: rotate(-90deg) translateX(28%);
    transform-origin: 100% 100%;
  }
}
@media (min-width:701px) and (max-width:900px) {
  .contact-aside-panel { padding: 26px; }
}

/* Subtle spotlight on the Twitch tile, pointer devices only. */
.channel.twitch { isolation: isolate; overflow: hidden; }
.channel.twitch::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(310px circle at var(--beys-spot-x, 50%) var(--beys-spot-y, 50%),
       rgba(222,185,241,.20), rgba(222,185,241,.055) 44%, transparent 76%);
  opacity: 0;
  transition: opacity 340ms ease;
}
.channel.twitch > * { position: relative; z-index: 1; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .channel.twitch:hover::before, .channel.twitch:focus-visible::before { opacity: 1; }
}

/* Unified, low-key lift for real interactive surfaces. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .beys-library-entry, .team-grid .person, .person-feature {
    transition: transform 320ms cubic-bezier(.22,1,.36,1),
                box-shadow 320ms ease, border-color 250ms ease;
  }
  .beys-library-entry:hover, .beys-library-entry:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 18px 35px rgba(60,44,29,.09);
  }
  .team-grid .person:hover, .team-grid .person:focus-within,
  .person-feature:hover, .person-feature:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(60,44,29,.085);
  }
}

/* Section headings: quiet word-level arrival when the section enters view. */
@media (prefers-reduced-motion:no-preference) {
  .section-top.beys-revealed h2 {
    animation: beys-editorial-title 850ms cubic-bezier(.22,1,.36,1) both;
  }
  @keyframes beys-editorial-title {
    from { opacity: .64; transform: translate3d(0, 9px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }
}

/* Mobile: preserve original one-column layout, readable titles, no sticky effects. */
@media (max-width: 900px) { .hero-copy { position: static; } }
@media (max-width: 700px) {
  .youtube-group .beys-youtube-latest { padding: 14px 14px 17px; }
  .youtube-group .beys-youtube-cards { gap: 10px; }
  .youtube-group .beys-youtube-name {
    font-size: 11.8px; line-height: 1.42; min-height: 4.26em;
    margin: 10px 10px 12px;
  }
  .contact-aside-panel:after { content: '✦'; }
}
@media (max-width: 365px) {
  .youtube-group .beys-youtube-name { font-size: 11px; margin: 9px 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .channel.twitch::before { display: none; }
  .youtube-group .beys-youtube-video,
  .youtube-group .beys-youtube-thumb img,
  .beys-library-entry, .team-grid .person, .person-feature { transition: none !important; }
}


/* BEYS Signature · 25 Oct 2026
   A continuous visual thread, not a generic animated background. */
@media (min-width: 1100px) {
  #unterlagen > .container, #team > .container, #kontakt > .container {
    position: relative;
  }
  #unterlagen > .container::before,
  #team > .container::before,
  #kontakt > .container::before {
    content: "";
    position: absolute;
    left: -29px;
    top: 10px;
    bottom: -90px;
    width: 1px;
    background: linear-gradient(180deg, #b99971 0%, #d8c9b5 35%, #e5ded3 80%, transparent 100%);
    opacity: .72;
    pointer-events: none;
  }
  #unterlagen .section-no::before, #team .section-no::before, #kontakt .section-no::before {
    content: "";
    position: absolute;
    left: -34px;
    top: 5px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid #b8956e;
    background: #f6f3ee;
    box-shadow: 0 0 0 5px #b8956e12;
  }
  #unterlagen .section-no, #team .section-no, #kontakt .section-no { position: relative; }
  #unterlagen .section-no::before, #team .section-no::before, #kontakt .section-no::before {
    left: -34px;
  }
}
/* A consistent, identifiable bronze detail on the knowledge archive. */
.beys-library-entry { position: relative; overflow: hidden; }
.beys-library-entry::before {
  content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(#dbc6a9,#ad865d,#dbc6a9);
  opacity: .8;
}
/* Refine the lecture/Twitch relationship while retaining accurate API-driven status. */
.sunday-live-card { border-color: #e1d2c0; }
.channel.twitch { border: 1px solid #3a2a42; }
.channel.twitch .channel-arrow { transition: transform 240ms cubic-bezier(.2,.75,.28,1); }
@media (hover:hover) and (pointer:fine) {
  .channel.twitch:hover .channel-arrow { transform: translateX(4px); }
}
/* Real-time live indication: only animates when the existing JS confirms live. */
.channel.twitch.beys-is-live .beys-twitch-live-pill::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #c33434; box-shadow: 0 0 0 0 rgba(195,52,52,.3);
  animation: beys-live-beacon 2.2s ease-out infinite;
}
@keyframes beys-live-beacon {
  0% { box-shadow: 0 0 0 0 rgba(195,52,52,.32); }
  65%, 100% { box-shadow: 0 0 0 7px rgba(195,52,52,0); }
}
@media (prefers-reduced-motion: reduce) {
  .channel.twitch.beys-is-live .beys-twitch-live-pill::before { animation: none; }
}


