/* ===== HOME (Card bleibt wie gehabt) ===== */
.home{
  background: rgba(43,32,26,.3);
  padding: 20px;
  margin: 20px 0;
  border-radius: 10px;
  border: 2px solid #000;
  box-shadow: 0 4px 8px rgba(0,0,0,.2);
}
.home:hover{
  border: 3px solid rgba(46,55,70,.7);
  box-shadow: 0 0 10px var(--pink), 0 4px 8px rgba(0,0,0,.2);
  animation: pulseGlow 1.5s infinite alternate ease-in-out;
}

/* Größere Buttons in der HOME-Section */
.home .c-btn.btn-lg{ height: 50px; }

/* ===== CONTACT MODAL (Overlay + Dialog) ===== */
.contact-modal{
  position: fixed;
  inset: 0;
  display: none;                 /* wird per JS auf 'grid' gesetzt */
  z-index: 9999;
  background: rgba(10,12,16,.55);
  backdrop-filter: blur(4px) saturate(1.05);
  -webkit-backdrop-filter: blur(4px) saturate(1.05);
  place-items: center;
}

.contact-dialog{
  width: min(900px, 92vw);
  height: min(85vh, 900px);
  background: linear-gradient(180deg,#485363 0%,#4f5c6f 100%);
  border: 2px solid rgba(0,0,0,.65);
  border-radius: 18px;
  box-shadow:
    0 0 22px rgba(84,101,129,.35),
    0 0 44px rgba(204,156,154,.25),
    0 0 66px rgba(250,181,184,.18);
  position: relative;
  overflow: hidden;
}

/* Close-Button oben rechts */
.contact-close{
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 2px solid rgba(0,0,0,.6);
  background: linear-gradient(180deg, #886762 0%, #2b201a 100%);
  color: #ffeaea;
  cursor: pointer;
}

/* iFrame füllt den Dialog */
.contact-iframe{
  width: 100%;
  height: 100%;
  border: 0;
  background: #485363;
}

/* HOME-Card bleibt, nur Button und Modal anpassen */
@media (max-width: 768px){
  .home{ padding: 16px; }
  .c-btn.btn-lg{ padding: .8rem 1.1rem; font-size: 1rem; }
}

/* Contact-Modal mobil fullscreen-ish */
#contact-modal[aria-hidden="false"] .modal-content,
#contact-modal .modal-content{ /* falls du dem inneren Div eine Klasse gibst */
  /* nichts */
}
@media (max-width: 768px){
  #contact-modal > div[role="dialog"]{
    width: 96vw;
    height: 88vh;
    border-radius: 14px;
  }
  #close-contact{
    top: 8px; right: 8px;
    padding: 8px 12px;
    border-radius: 12px;
  }
}
@media (max-width: 480px){
  #contact-modal > div[role="dialog"]{ width: 98vw; height: 90vh; }
}

/* ===== Start Gate ===== */
.start-gate { text-align:center; }

.gate{
  max-width: 980px;
  margin: 14px auto 0;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 22px;
  background: rgba(84,101,129,.15);
  border: 2px solid rgba(0,0,0,.5);
  border-radius: 16px;
  box-shadow:
    0 0 22px rgba(84,101,129,.35),
    0 0 44px rgba(204,156,154,.25),
    0 0 66px rgba(250,181,184,.18);
}

.gate-card{
  background: linear-gradient(180deg,#485363 0%, #4f5c6f 100%);
  border: 2px solid rgba(0,0,0,.65);
  border-radius: 16px;
  padding: 18px;
  display: grid;
  align-content: center;
  gap: 14px;
}

.gate-label .muted{
  display:inline-block;
  color:#f7d7d9;
  opacity:.85;
  font-size:.95rem;
}

.gate-actions{ display:flex; justify-content:center; }

.gate-btn{
  min-width: 160px;
  padding: 14px 28px;
  border-radius: 14px;
  letter-spacing:.6px;
}

.gate-btn--sfw{
  background: linear-gradient(180deg,#546581 0%, #2b3a4f 100%);
  border: 2px solid rgba(0,0,0,.65);
}
.gate-btn--sfw:hover{
  box-shadow: 0 0 12px rgba(84,101,129,.6), 0 0 18px rgba(250,181,184,.25);
  transform: translateY(-1px);
}

.gate-btn--nsfw{
  background: linear-gradient(180deg,#886762 0%, #2b201a 100%);
  border: 2px solid rgba(0,0,0,.65);
}
.gate-btn--nsfw:hover{
  box-shadow: 0 0 12px rgba(250,181,184,.6), 0 0 18px rgba(84,101,129,.25);
  transform: translateY(-1px);
}

/* Center column: contact + verify */
.gate-center{
  display:grid;
  align-content:center;
  gap: 16px;
  padding: 10px 12px;
  background: rgba(0,0,0,.12);
  border: 2px solid rgba(0,0,0,.45);
  border-radius: 14px;
}

.gate-contact{ min-width: 150px; }

.gate-verify{ display:grid; gap: 8px; }
.gate-verify .muted{ color:#f7d7d9; opacity:.85; }
.gate-verify-btn[disabled]{
  opacity:.65; cursor:not-allowed;
}

/* Responsive */
@media (max-width: 900px){
  .gate{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .gate-center{ order: -1; }
}