/* =====================================================================
   community-uebersicht.css
   Die Raumuebersicht (pages/community.php).
   Angelegt am 22.09.2026, am 23.09.2026 auf die Tafel umgestellt.

   Das Schwarz-Weiss der ersten Fassung war der Community zu hart.
   Grundlage ist jetzt assets/css/tafel.css: blauer Seitenverlauf
   bleibt sichtbar, der Inhalt sitzt auf einer dunklen Tafel, Poppins
   als Schrift, Farbe ist erlaubt. Der Aufbau der Seite ist derselbe
   geblieben, nur die Oberflaeche ist neu.

   Diese Datei setzt voraus, dass tafel.css davor eingebunden ist.
   ===================================================================== */

/* Die Uebersicht ist die Tafel. */
.community-page{
  width:100%;max-width:1000px;
  margin:clamp(16px,3vw,32px) auto clamp(24px,4vw,48px);
  padding:clamp(28px,5vw,48px) clamp(18px,4vw,36px) clamp(36px,6vw,56px);

  font-family:var(--tf-schrift);
  color:var(--tf-text);
  font-size:17px;line-height:1.7;letter-spacing:normal;text-align:left;
  min-height:0;

  background:linear-gradient(180deg, var(--tf-tafel-1) 0%, var(--tf-tafel-2) 100%);
  border:1px solid var(--tf-rand);
  border-radius:20px;
  box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
.community-page *{box-sizing:border-box;letter-spacing:normal}
.community-page h1,.community-page h2,.community-page h3{
  font-family:var(--tf-schrift) !important;text-transform:none !important;
  text-shadow:none !important;animation:none !important;
  background:none !important;-webkit-text-fill-color:currentColor !important;
}
main.cp-main{width:100%}

/* ================== Kopf ================== */
.community-header{
  text-align:left;margin-bottom:clamp(1.6rem,3vw,2.4rem);
  padding-bottom:clamp(1.2rem,2.5vw,1.8rem);border-bottom:1px solid var(--tf-linie);
}
.community-header h1{
  margin:0;font-size:clamp(2rem,5vw,3.2rem);font-weight:500;line-height:1.05;color:var(--tf-text);
}
.community-header p{
  margin:.8rem 0 0;font-size:1.05rem;color:var(--tf-leise);max-width:62ch;
}

.community-db-error{
  padding:1.2rem;border:1px solid var(--tf-rot);background:rgba(255,107,107,.1);
  color:#FFB3B3;font-size:.98rem;line-height:1.7;
}
.community-db-error code{
  font-family:ui-monospace,Menlo,monospace;font-size:.9em;color:var(--tf-kasse);
}
.community-login-notice{
  padding:.9rem 1rem;margin-bottom:1.4rem;
  border-left:2px solid var(--tf-linie);color:var(--tf-leise);font-size:.98rem;
}
.community-login-notice a{color:var(--tf-kasse);text-decoration:none;border-bottom:1px solid currentColor}

/* ================== Der Lagebericht ================== */
.cp-lage-kopf{
  padding:.9rem 0;border-bottom:1px solid var(--tf-linie);
  font-size:.98rem;color:var(--tf-leise);
}
.cp-lage-kopf b{color:var(--tf-kasse);font-weight:500}

/* Der Name bleibt, damit nichts anderes bricht. Kachel ist es keine mehr. */
.rooms-grid{display:block;margin:0}
.room-card{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem 1.5rem;
  padding:1.1rem 0;border-bottom:1px solid var(--tf-linie);
  background:transparent;border-radius:0;box-shadow:none;
  color:inherit;text-decoration:none;
  transition:background .18s;
}
a.room-card:hover{background:rgba(255,255,255,.03)}
.room-card.locked{cursor:default}

.room-card-header{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
}
.room-icon{
  width:auto;height:auto;background:none;border:0;border-radius:0;
  font-size:1.15rem;line-height:1;
}
.room-name{
  font-size:1.15rem;font-weight:500;color:var(--tf-text);
}
.room-unread-badge{
  background:var(--tf-kasse);color:#07131A;font-size:.78rem;font-weight:600;
  padding:0 .45rem;border-radius:0;font-variant-numeric:tabular-nums;
}
.lock-badge{
  font-size:.74rem;color:var(--tf-gelb);border:1px solid var(--tf-gelb);
  padding:0 .4rem;border-radius:2px;background:transparent;font-weight:400;
}
.ss-rules-trigger{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.74rem;color:var(--tf-leise);border:1px solid var(--tf-linie);
  padding:0 .45rem;border-radius:2px;background:transparent;cursor:pointer;
  position:static;
}
.ss-rules-trigger:hover{border-color:var(--tf-text);color:var(--tf-text)}
.ss-rules-trigger-icon{font-size:.8rem}

.room-description{
  font-size:.88rem;color:var(--tf-stumm);margin-top:.15rem;
}
.room-description small{color:var(--tf-gelb)}

.cp-letzte{
  margin-top:.5rem;font-size:.95rem;color:var(--tf-leise);line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.cp-letzte b{color:var(--tf-leise);font-weight:500}
.cp-letzte.cp-still{color:var(--tf-stumm);font-style:italic}

.room-card-footer{
  display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;
  text-align:right;white-space:nowrap;
}
.cp-zeit{font-size:.82rem;color:var(--tf-stumm);font-variant-numeric:tabular-nums}
.room-stats{font-size:.78rem;color:var(--tf-stumm);font-variant-numeric:tabular-nums}
.room-enter-btn{
  margin-top:.2rem;font-size:.88rem;color:var(--tf-kasse);
  background:transparent;border:0;padding:0;text-decoration:none;
}
.room-enter-btn.disabled{color:var(--tf-stumm)}
a.room-card:hover .room-enter-btn{color:var(--tf-text)}

/* ================== Umfragen ================== */
.cp-divider{margin:2.4rem 0 0}
.cp-divider-line{height:1px;background:var(--tf-linie);border:0}
.cp-polls-section{margin-top:2.4rem}
.cp-polls-title{
  font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tf-leise);margin:0 0 1rem;
}
.cp-polls-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;
}
.cp-poll-card-header,.cp-poll-card-footer{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap}
.cp-poll-card-header{
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tf-stumm);
}
.cp-poll-question{
  font-size:1.02rem;font-weight:500;color:var(--tf-text);margin:.5rem 0;line-height:1.4;
}
.cp-poll-card-footer{font-size:.82rem;color:var(--tf-stumm);margin-top:.5rem}
.cp-poll-room{color:var(--tf-kasse)}
.cp-poll-votes{font-variant-numeric:tabular-nums}
.cp-polls-archive-link{
  display:inline-block;margin-top:1.2rem;font-size:.92rem;color:var(--tf-leise);
  text-decoration:none;border-bottom:1px solid var(--tf-linie);padding-bottom:.15rem;
}
.cp-polls-archive-link:hover{color:var(--tf-text);border-bottom-color:var(--tf-text)}

/* Die Umfragekarte selbst */
.cp-polls-grid > *{
  border:1px solid rgba(0,255,255,.18);border-radius:12px;
  background:rgba(255,255,255,.04);padding:1rem;cursor:pointer;
  transition:border-color .2s,box-shadow .2s;
}
.cp-polls-grid > *:hover{
  border-color:rgba(0,255,255,.5);box-shadow:0 4px 24px rgba(0,255,255,.12);
}

/* ================== Fenster: Umfrage und Safe-Space-Regeln ================== */
.cp-modal-overlay,.ss-modal-overlay{
  display:none;position:fixed;inset:0;z-index:3200;
  background:rgba(5,5,8,.82);align-items:center;justify-content:center;padding:16px;
}
.cp-modal-overlay.cp-active,.cp-modal-overlay.active,
.ss-modal-overlay.ss-active,.ss-modal-overlay.active{display:flex}
.cp-modal,.ss-modal{
  /* Fenster schweben ueber der Seite und brauchen einen festen,
     undurchsichtigen Grund, sonst sieht man den Inhalt dahinter. */
  background:linear-gradient(180deg,#131A26 0%,#0B111A 100%);
  border:1px solid var(--tf-rand);border-radius:16px;
  box-shadow:0 30px 70px rgba(0,0,0,.65);
  padding:1.4rem;width:100%;max-width:470px;max-height:84vh;overflow-y:auto;
  font-family:var(--tf-schrift);color:var(--tf-text);
  min-width:0;
}
.cp-modal-close,.ss-modal-close{
  background:transparent;border:0;color:var(--tf-leise);font-size:1.5rem;
  line-height:1;cursor:pointer;
}
.cp-modal-close:hover,.ss-modal-close:hover{color:var(--tf-text)}
.ss-modal-header{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-bottom:.9rem;
}
.ss-modal-header h2,.ss-modal-header h3{margin:0;font-size:1.2rem;font-weight:500}
.ss-modal-body{font-size:.98rem;color:var(--tf-leise);line-height:1.7}
.ss-modal-body ul{margin:.5rem 0 0 1.1rem}
.ss-modal-body li{margin-bottom:.45rem}

.cp-modal-room{
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tf-kasse);
}
.cp-modal-options{margin:1rem 0 0}
.cp-modal-opt-btn{
  display:block;width:100%;text-align:left;position:relative;
  background:transparent;border:1px solid var(--tf-linie);color:var(--tf-text);
  padding:.55rem .8rem;font:inherit;font-size:.95rem;cursor:pointer;
  margin-bottom:.45rem;transition:border-color .2s;
}
.cp-modal-opt-btn:hover{border-color:var(--tf-kasse)}
.cp-mc-check{color:var(--tf-kasse);margin-right:.4rem}
.cp-modal-results{margin-top:1rem}
.cp-res-row{margin-bottom:.9rem}
.cp-res-label{display:flex;align-items:baseline;gap:.5rem;font-size:.95rem;margin-bottom:.25rem}
.cp-res-pct{margin-left:auto;color:var(--tf-kasse);font-size:.88rem;font-variant-numeric:tabular-nums}
.cp-res-bar-bg{height:6px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden}
.cp-res-bar-bg > *{height:100%;background:var(--tf-kasse);display:block}
.cp-res-total{
  margin-top:1rem;padding-top:.7rem;border-top:1px solid var(--tf-linie);
  font-size:.88rem;color:var(--tf-leise);font-variant-numeric:tabular-nums;
}
.cp-modal-status{font-size:.88rem;color:var(--tf-leise);margin-top:.8rem}
.cp-modal-guest-hint{
  margin-top:1rem;padding:.8rem;border-left:2px solid var(--tf-linie);
  font-size:.92rem;color:var(--tf-leise);
}
.cp-guest-login-link{color:var(--tf-kasse);text-decoration:none;border-bottom:1px solid currentColor}

/* ================== Schmale Fenster ================== */
@media (max-width:640px){
  .community-page{font-size:17px}
  .room-card{grid-template-columns:minmax(0,1fr);gap:.2rem}
  .room-card-footer{
    flex-direction:row;align-items:center;justify-content:flex-start;
    gap:.9rem;text-align:left;margin-top:.5rem;flex-wrap:wrap;
  }
  .room-enter-btn{margin-top:0}
  .cp-polls-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .community-page *{transition:none !important;animation:none !important}
}