/* ============================================================
   May-Bühne — Hero-Karte und Chat 1:1 aus der Live-Anwendung
   (ki-assistentin.html). Alle Regeln auf .may-buehne begrenzt,
   Keyframes mit mb- vorangestellt, damit nichts in stil.css kollidiert.
   ============================================================ */
.may-buehne{--bg:#000000;--card:#0a0a0a;--card-border:rgba(255,255,255,.08);
  --fg:#ffffff;--muted:rgba(255,255,255,.6);--spotlight:rgba(255,255,255,.12);
  background:var(--bg);color:var(--fg);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  display:flex;flex-direction:column;align-items:center;padding:28px 24px 40px}
.may-buehne *{box-sizing:border-box}
.may-buehne .card {
  position: relative;
  width: 100%;
  max-width: 1400px;
  height: min(1000px, 82vh);
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
}
.may-buehne .spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), var(--spotlight), transparent 40%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.may-buehne .card:hover .spotlight {
  opacity: 1;
}
.may-buehne .grid-bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
.may-buehne .inner {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  width: 100%;
}
.may-buehne .text-col {
  flex: 1;
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  z-index: 3;
}
.may-buehne .scene-col {
  flex: 1;
  position: relative;
}
.may-buehne .kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 11px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.88);
  align-self: flex-start;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.35);
}
.may-buehne .kicker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c4b5fd;
  box-shadow: 0 0 10px #c4b5fd, 0 0 4px #f0abfc;
  animation: mb-kickerPulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes mb-kickerPulse {
0%, 100% {
  opacity: 1;
  transform: scale(1);
}
50% {
  opacity: 0.45;
  transform: scale(0.8);
}
}
.may-buehne h1 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.55) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.may-buehne h1 em {
  font-style: italic;
  background: linear-gradient(120deg, #c4b5fd 0%, #f0abfc 50%, #fda4af 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.may-buehne .brand {
  display: inline-flex;
  align-items: baseline;
  -webkit-text-fill-color: white;
  color: white;
}
.may-buehne .logo-m {
  height: 0.95em;
  width: auto;
  margin-right: 0.04em;
  filter: brightness(1.08) drop-shadow(0 0 14px rgba(196, 181, 253, 0.45));
  transform: translateY(0.08em);
  user-select: none;
  -webkit-user-drag: none;
}
.may-buehne p.lead {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 38ch;
}
.may-buehne .floating-chip {
  position: absolute;
  padding: 10px 16px 10px 14px;
  background: rgba(20, 20, 25, 0.55);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.95rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 4;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  top: 50%;
  left: 50%;
}
.may-buehne .floating-chip.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.may-buehne .chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c4b5fd;
  box-shadow: 0 0 10px #c4b5fd, 0 0 4px #f0abfc;
  flex-shrink: 0;
}
.may-buehne .chip-text {
  background: linear-gradient(120deg, #e9d5ff 0%, #fbcfe8 60%, #fda4af 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.may-buehne .chip-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: #f0abfc;
  margin-left: 1px;
  animation: mb-blink 1s steps(2) infinite;
}
@keyframes mb-blink {
50% {
  opacity: 0;
}
}
.may-buehne #spline-container {
  position: absolute;
  inset: 0;
}
.may-buehne #spline-container canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.may-buehne .ipad {
  position: absolute;
  top: 56%;
  right: 9%;
  width: 115px;
  height: 158px;
  background: linear-gradient(145deg, #2a2a2f 0%, #161618 100%);
  border-radius: 14px;
  padding: 8px 5px 12px;
  z-index: 3;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.7), 0 8px 18px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 1px rgba(255, 255, 255, 0.1);
  transform-origin: center;
  transform: perspective(800px) rotateY(-18deg) rotateX(10deg) rotateZ(-4deg);
  animation: mb-ipadFloat 6s ease-in-out infinite;
  pointer-events: none;
}
.may-buehne .ipad::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #0a0a0a;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.15);
}
.may-buehne .ipad::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.35);
}
.may-buehne .ipad-screen {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(165deg, #0d0a18 0%, #1a1426 100%);
  padding: 10px 8px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.06);
  animation: mb-screenPulse 3.2s ease-in-out infinite;
}
@keyframes mb-screenPulse {
0%, 88%, 100% {
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.06), inset 0 0 16px rgba(196, 181, 253, 0.18);
}
44% {
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1), inset 0 0 22px rgba(196, 181, 253, 0.5), 0 0 28px rgba(196, 181, 253, 0.35);
}
}
@keyframes mb-ipadFloat {
0%, 100% {
  transform: perspective(800px) rotateY(-18deg) rotateX(10deg) rotateZ(-4deg) translateY(0);
}
50% {
  transform: perspective(800px) rotateY(-23deg) rotateX(7deg) rotateZ(-3deg) translateY(-7px);
}
}
.may-buehne .code-line {
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(196, 181, 253, 0.8) 25%, rgba(240, 171, 252, 0.9) 75%, transparent);
  border-radius: 2px;
  margin-bottom: 7px;
  opacity: 0.7;
  animation: mb-lineShimmer 2.4s ease-in-out infinite;
}
.may-buehne .code-line:nth-child(1) {
  width: 85%;
  animation-delay: 0s;
}
.may-buehne .code-line:nth-child(2) {
  width: 60%;
  animation-delay: 0.3s;
}
.may-buehne .code-line:nth-child(3) {
  width: 92%;
  animation-delay: 0.6s;
}
.may-buehne .code-line:nth-child(4) {
  width: 45%;
  animation-delay: 0.9s;
}
.may-buehne .code-line:nth-child(5) {
  width: 75%;
  animation-delay: 1.2s;
}
@keyframes mb-lineShimmer {
0%, 100% {
  opacity: 0.4;
  transform: translateX(0);
}
50% {
  opacity: 0.95;
  transform: translateX(2px);
}
}
.may-buehne .code-cursor {
  display: inline-block;
  width: 5px;
  height: 8px;
  background: #f0abfc;
  margin-top: 4px;
  box-shadow: 0 0 6px #f0abfc;
  animation: mb-blink 1s steps(2) infinite;
}
.may-buehne .loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 1;
}
.may-buehne .loader::after {
  content: '';
  width: 16px;
  height: 16px;
  margin-left: 12px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: mb-spin 0.8s linear infinite;
}
@keyframes mb-spin {
to {
  transform: rotate(360deg);
}
}
.may-buehne .loaded .loader {
  display: none;
}
@media (max-width: 768px) {
.may-buehne {
  padding: 80px 16px 20px;
}
.may-buehne .card {
  height: auto;
  min-height: 84vh;
}
.may-buehne .inner {
  flex-direction: column;
}
.may-buehne .text-col {
  padding: 40px 28px 16px;
  text-align: center;
}
.may-buehne p.lead {
  margin: 0 auto;
}
.may-buehne .scene-col {
  min-height: 380px;
}
}
.may-buehne .may-chat {
  position:relative;
  width:100%;
  max-width:680px;
  margin:54px auto 10px;
  padding:0 4px
}
.may-buehne .may-chat .mc-glow {
  position:absolute;
  top:-30px;
  left:50%;
  transform:translateX(-50%);
  width:70%;
  height:200px;
  background:radial-gradient(circle,rgba(124,92,255,.12),transparent 70%);
  filter:blur(40px);
  pointer-events:none;
  z-index:0
}
.may-buehne .may-chat>* {
  position:relative;
  z-index:1
}
.may-buehne .may-chat .mc-head {
  text-align:center;
  margin-bottom:26px
}
.may-buehne .may-chat .mc-title {
  font-size:clamp(26px,4vw,34px);
  font-weight:600;
  letter-spacing:-.02em;
  margin:0 0 14px;
  background:linear-gradient(90deg,rgba(255,255,255,.92),rgba(255,255,255,.45));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}
.may-buehne .may-chat .mc-divider {
  height:1px;
  width:100%;
  max-width:440px;
  margin:0 auto;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)
}
.may-buehne .may-chat .mc-sub {
  font-size:14px;
  color:rgba(255,255,255,.5);
  margin-top:14px;
  letter-spacing:.04em
}
.may-buehne .may-chat .mc-box {
  position:relative;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 30px 80px -42px rgba(0,0,0,.9);
  transition:border-color .2s
}
.may-buehne .may-chat .mc-box:focus-within {
  border-color:rgba(124,92,255,.4)
}
.may-buehne .may-chat .mc-box textarea {
  display:block;
  width:100%;
  min-height:62px;
  max-height:200px;
  resize:none;
  background:transparent;
  border:0;
  outline:none;
  color:rgba(255,255,255,.92);
  font-family:inherit;
  font-size:15px;
  line-height:1.5;
  padding:18px 18px 4px
}
.may-buehne .may-chat .mc-box textarea::placeholder {
  color:rgba(255,255,255,.28)
}
.may-buehne .may-chat .mc-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-top:1px solid rgba(255,255,255,.06)
}
.may-buehne .may-chat .mc-icbtn {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:10px;
  border:0;
  background:none;
  color:rgba(255,255,255,.4);
  cursor:pointer;
  transition:.2s
}
.may-buehne .may-chat .mc-icbtn:hover {
  color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.05)
}
.may-buehne .may-chat .mc-send {
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:0;
  border-radius:11px;
  padding:9px 16px;
  font-family:inherit;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  transition:.2s;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.4)
}
.may-buehne .may-chat .mc-send.on {
  background:#fff;
  color:#0a0a0a;
  box-shadow:0 10px 26px -10px rgba(255,255,255,.5)
}
.may-buehne .may-chat .mc-send svg {
  width:16px;
  height:16px
}
.may-buehne .may-chat .mc-chips {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  justify-content:center;
  margin-top:22px
}
.may-buehne .may-chat .mc-chip {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.02);
  color:rgba(255,255,255,.62);
  font-size:13.5px;
  cursor:pointer;
  transition:.2s;
  font-family:inherit
}
.may-buehne .may-chat .mc-chip:hover {
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  border-color:rgba(255,255,255,.14)
}
.may-buehne .may-chat .mc-chip svg {
  width:15px;
  height:15px;
  opacity:.8;
  flex:none
}
.may-buehne .may-chat .mc-log {
  margin-top:24px;
  display:flex;
  flex-direction:column;
  gap:12px
}
.may-buehne .may-chat .mc-msg {
  max-width:88%;
  padding:13px 16px;
  border-radius:16px;
  font-size:14.5px;
  line-height:1.5
}
.may-buehne .may-chat .mc-msg.user {
  align-self:flex-end;
  background:rgba(255,255,255,.1);
  color:#fff;
  border-bottom-right-radius:5px
}
.may-buehne .may-chat .mc-msg.may {
  align-self:flex-start;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.85);
  border-bottom-left-radius:5px
}
.may-buehne .may-chat .mc-msg.may a {
  color:#fff;
  font-weight:600
}
.may-buehne .may-chat .mc-typing {
  display:inline-flex;
  gap:4px;
  align-items:center
}
.may-buehne .may-chat .mc-typing i {
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.7);
  animation:mb-mcblink 1.2s infinite
}
.may-buehne .may-chat .mc-typing i:nth-child(2) {
  animation-delay:.15s
}
.may-buehne .may-chat .mc-typing i:nth-child(3) {
  animation-delay:.3s
}
@keyframes mb-mcblink {
0%,100% {
  opacity:.3;
  transform:scale(.85)
}
50% {
  opacity:.95;
  transform:scale(1.1)
}
}
@media(prefers-reduced-motion:reduce) {
.may-buehne .may-chat .mc-typing i {
  animation:none
}
}