/* ===== Community Section Card ===== */
.community{
  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);
}
.community: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;
}

.community-title{
  text-align:center;
  color:#fab5b8;
  letter-spacing:1px;
  margin: 0 0 6px 0;
}
.community-sub{
  text-align:center;
  margin:6px 0 0 0;
  color:#f7d7d9;
  font-weight:400;
}
.community-hint{
  text-align:center;
  margin: 10px 0 0 0;
  color:#f7d7d9;
}

/* Innerer Rahmen der Community-Box */
.community-card{
  max-width: 980px;
  margin: 14px auto;
  padding: 22px;
  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);
}

/* Collapsible Rules */
.comm-details{
  background: rgba(0,0,0,.15);
  border: 2px solid rgba(0,0,0,.55);
  border-radius: 14px;
}
.comm-summary{
  padding: 12px 16px;
  cursor: pointer;
  color: #ffe8e9;
  list-style: none;
  user-select: none;
  border-radius: 12px;
}
.comm-summary::-webkit-details-marker{ display:none; }

/* Regel-Cards */
.comm-rules{
  margin:14px 16px 18px;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:14px;
  counter-reset:r;
}
.comm-rules li{
  counter-increment:r;
  position:relative;
  padding:12px 14px 12px 52px;
  color:#2b201a;
  background:rgba(255,255,255,.58);
  border:2px solid rgba(0,0,0,.35);
  border-radius:14px;
  box-shadow:
    0 2px 10px rgba(0,0,0,.25),
    0 0 18px rgba(250,181,184,.08),
    inset 0 0 0 1px rgba(255,255,255,.35);
}
.comm-rules li::before{
  content: counter(r);
  position:absolute;
  left:12px; top:12px;
  width:28px; height:28px;
  border-radius:50%;
  background:#ffffff;
  color:#2b201a;
  font-weight:800;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 10px rgba(255,255,255,.45);
}
.rule-title{
  font-weight:800;
  letter-spacing:.2px;
  color:#1f1c19;
}
.rule-desc{
  margin-top:4px;
  color:#3a3430;
  opacity:.9;
  line-height:1.45;
}

/* Grid-Felder (Username, DOB, Checkbox) */
.comm-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
  align-items:end;
  isolation:isolate;
  contain: layout style;
  margin-top:16px;
}
.comm-grid > .field{
  min-width:0;
  position:relative;
  z-index:0;
}
.comm-label{
  display:block;
  color:#f7d7d9;
  margin-bottom:6px;
}
.comm-grid input[type="text"],
.comm-grid input[type="date"]{
  box-sizing:border-box !important;
  width:100% !important;
  display:block !important;
  padding:12px 14px !important;
  border-radius:14px !important;
  border:2px solid rgba(0,0,0,.55) !important;
  background:rgba(0,0,0,.18) !important;
  color:#ffe8e9 !important;
  outline:none !important;
  margin:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;
}
.comm-grid .checkwrap{ display:block; }
.comm-checklabel{
  box-sizing:border-box;
  display:flex; gap:10px; align-items:center; width:100%;
  padding:12px 14px; border-radius:14px;
  border:2px solid rgba(0,0,0,.55);
  background:rgba(0,0,0,.18); color:#ffe8e9; cursor:pointer;
  margin:0; box-shadow:none !important; overflow:hidden;
}
.comm-grid input[type="checkbox"]{
  transform:scale(1.2);
  margin:0;
}

/* Message + CTA */
.comm-msg{
  text-align:center;
  margin-top:10px;
  color:#ffbcbc;
  min-height:20px;
}
.comm-cta{
  display:flex;
  justify-content:center;
  margin-top:8px;
}
.join-btn{
  height:50px;
  padding:12px 22px;
  border-radius:16px;
  border:2px solid rgba(0,0,0,.65);
  background:linear-gradient(180deg,#886762 0%, #2b201a 100%);
  color:#ffeaea;
  letter-spacing:.4px;
  cursor:pointer;
}

/* Responsive */
@media (max-width:1100px){
  .comm-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:680px){
  .comm-grid{ grid-template-columns: 1fr; }
}

/* Der Rahmenblock innen etwas schmaler auf Mobile */
@media (max-width: 980px){
  .community .card{ /* falls du dem inneren Wrapper eine Klasse gibst; sonst .community > div:first-of-type */
    padding: 18px;
  }
}

/* Inputs von 3 Spalten -> 2 -> 1 (du hast schon Media-Queries; wir schärfen sie) */
@media (max-width: 1100px){
  .comm-grid{ grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 680px){
  .comm-grid{ grid-template-columns: 1fr; gap: 14px; }
}

/* Regelkarten mit schmaleren Spalten */
@media (max-width: 768px){
  .comm-rules{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
  .comm-rules li{ padding: 12px 12px 12px 48px; }
}

/* Join-Button angenehmer groß auf Touch */
@media (max-width: 768px){
  .community .c-btn{ padding: .9rem 1.2rem; font-size: 1rem; }
}