/* AIT Artloop – "Behind the Drawing": Button + Sidebar + Lightbox
   Touchscreen-optimiert (große Tap-Ziele, kein Hover nötig). */

:root{
  --ait-petrol:#009899; --ait-petrol-d:#007a7b; --ait-violet:#470E52;
  --ait-turq:#24B1B2; --ait-turq-l:#4EC3BB; --ait-ink:#2A3339;
  --ait-paper:#F4F6F7; --ait-ph:#D3DADD;
}

/* ---- Button "Behind the Drawing" (fix oben rechts) ---- */
.btd-btn{
  position:fixed; top:24px; right:24px; z-index:120;
  display:flex; align-items:center; gap:12px;
  font-family:'D-DIN',Arial,sans-serif; font-weight:700; font-size:19px;
  text-transform:uppercase; letter-spacing:.06em; color:#fff;
  background:var(--ait-violet); border:none; border-radius:999px;
  padding:16px 26px; cursor:pointer; box-shadow:0 6px 22px rgba(0,0,0,.18);
  -webkit-tap-highlight-color:transparent; transition:transform .15s ease, background .2s ease;
}
.btd-btn:active{ transform:scale(.97); }
.btd-btn svg{ width:26px; height:26px; flex:0 0 auto; }

/* ---- Backdrop ---- */
.btd-backdrop{
  position:fixed; inset:0; z-index:130; background:rgba(28,20,34,.45);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s;
}
.btd-backdrop.open{ opacity:1; visibility:visible; transition:opacity .3s ease; }

/* ---- Sidebar ---- */
.btd-sidebar{
  position:fixed; top:0; right:0; z-index:140; height:100dvh;
  width:min(500px,92vw); background:var(--ait-paper);
  transform:translateX(100%); transition:transform .38s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; box-shadow:-12px 0 40px rgba(0,0,0,.22);
  font-family:'D-DIN',Arial,sans-serif;
}
.btd-sidebar.open{ transform:translateX(0); }

.btd-head{ background:var(--ait-violet); color:#fff; padding:30px 28px 24px; position:relative; flex:0 0 auto; }
.btd-head h2{ margin:0; font-size:30px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; line-height:1.05; }
.btd-head p{ margin:10px 0 0; font-size:15px; line-height:1.4; color:#E8D9EE; max-width:88%; }
.btd-close{
  position:absolute; top:20px; right:20px; width:46px; height:46px;
  background:rgba(255,255,255,.12); border:none; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent;
}
.btd-close svg{ width:22px; height:22px; stroke:#fff; }
.btd-close:active{ background:rgba(255,255,255,.28); }

.btd-body{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding:8px 20px 32px; flex:1 1 auto; }
.btd-group-title{
  font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.14em;
  color:var(--ait-petrol); margin:26px 6px 12px; display:flex; align-items:center; gap:10px;
}
.btd-group-title::after{ content:""; flex:1; height:2px; background:var(--ait-turq-l); opacity:.5; }

.btd-list{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.btd-card{
  background:#fff; border-radius:14px; overflow:hidden; cursor:pointer; text-align:left;
  border:1px solid #E2E7E9; padding:0; -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, box-shadow .2s ease; display:flex; flex-direction:column;
}
.btd-card:active{ transform:scale(.98); box-shadow:0 4px 16px rgba(0,0,0,.12); }

/* Grauer Platzhalter + Play-Button */
.btd-thumb{ position:relative; aspect-ratio:16/9; background:var(--ait-ph);
  background-image:linear-gradient(135deg,#DCE2E4,#C7CFD2); display:flex; align-items:center; justify-content:center; }
.btd-thumb .btd-play{
  width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(0,0,0,.18);
}
.btd-thumb .btd-play svg{ width:22px; height:22px; margin-left:3px; fill:var(--ait-violet); }
.btd-thumb .btd-dur{ position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.55); color:#fff;
  font-size:11px; padding:2px 7px; border-radius:4px; letter-spacing:.03em; }

.btd-meta{ padding:12px 14px 14px; }
.btd-meta .t{ font-size:16px; font-weight:700; color:var(--ait-ink); line-height:1.2; }
.btd-meta .s{ font-size:13px; color:#66757D; margin-top:4px; line-height:1.25; }

/* ---- Lightbox ---- */
.btd-lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(18,12,22,.92);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  opacity:0; visibility:hidden; transition:opacity .28s ease, visibility 0s linear .28s;
  font-family:'D-DIN',Arial,sans-serif; padding:40px;
}
.btd-lightbox.open{ opacity:1; visibility:visible; transition:opacity .28s ease; }
.btd-lb-title{ color:#fff; text-align:center; margin-bottom:18px; max-width:80vw; }
.btd-lb-title .t{ font-size:26px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.btd-lb-title .s{ font-size:16px; color:#C9BCD1; margin-top:4px; }
.btd-lightbox video{ max-width:82vw; max-height:70vh; width:auto; height:auto;
  border-radius:10px; background:#000; box-shadow:0 12px 50px rgba(0,0,0,.5); }
.btd-lb-close{
  position:absolute; top:26px; right:30px; width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,.14); border:none; cursor:pointer; display:flex;
  align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent;
}
.btd-lb-close svg{ width:26px; height:26px; stroke:#fff; }
.btd-lb-close:active{ background:rgba(255,255,255,.3); }

body.btd-modal-open{ overflow:hidden; }