/* Datei: /httpdocs/jsf/jsf.css
   - Spielfeld: 11 Spalten (A–K)
   - Banner:    10 Spalten (A–J) und mittig zentriert über/unter dem Feld
   - Hintergrund: /images/handball_feld.png
   - Spendernamen: mittig, max. 2 Zeilen, saubere Ellipse, Tooltip über title
*/

.jsf-wrapper { width: 90%; max-width: 950px; margin: 0 auto; }

/* Banner oben + Feld + Banner unten */
.jsf-board {
  display: grid;
  gap: 10px;
}

/* =========================
   Banner-Reihen (A–J = 10 Spalten)
   => zentriert über Feld (10/11 Breite)
   ========================= */
.jsf-banner-strip {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;

  /* 10/11 der Feldbreite, mittig */
  width: calc(100% * 10 / 11);
  margin: 0 auto;
}

/* Spielfeld mit Hintergrund */
.jsf-field-area {
  position: relative;
  aspect-ratio: 11 / 6.5;
  border-radius: .5rem;
  overflow: hidden;
}

/* Hintergrundbild als Layer */
.jsf-field-area::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/images/handball_feld_neu.png') center center / cover no-repeat;
  opacity: 0.70;
  pointer-events: none;
}

/* Grid Overlay (A–K = 11 Spalten, 8 Reihen) */
.jsf-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border-radius: .5rem;
  overflow: hidden;
}

/* =========================
   Zellen
   ========================= */
.jsf-cell {
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  border: 1px solid rgba(255,255,255,0.15);
  font-size: clamp(0.7rem, 0.9vw, 0.95rem);
  padding: 0 .15rem;
  cursor: default;
  user-select: none;
}

/* Banner-Zellen */
.jsf-banner-strip .jsf-cell {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: .5rem;
  min-height: 48px;
  background-color: rgba(255,255,255,0.35);
}

/* Banner-Logo */
.jsf-cell.banner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 6px;
}

/* =========================
   Preisfarben
   ========================= */
.bg-preis10 { background-color: rgba(255,255,255,0.05); }
.bg-preis20 { background-color: rgba(0,123,255,0.20); }
.bg-preis50 { background-color: rgba(255,165,0,0.25); }

/* =========================
   Status
   ========================= */
.status-frei     { color:#495057; font-weight:700; cursor:pointer; }
.status-bezahlt  { color:#000;    font-weight:800; }

.status-reserviert {
  color:#dc3545;
  display:flex;
  align-items:center;
  justify-content:center;
}

.status-reserviert i {
  font-size: 2.3em;
  color: #dc3545;
  -webkit-text-stroke: 2px #dc3545;
  text-shadow: 0 0 2px rgba(0,0,0,0.2);
  line-height: 1;
}

.jsf-cell.no-border { border:none !important; }
.status-frei:hover { background-color: rgba(255,255,255,0.2); }

/* Banner Hover */
.jsf-banner-strip .status-frei:hover { background-color: rgba(255,255,255,0.16); }

/* =========================
   Spendernamen im Spielfeld:
   - mittig (h/v)
   - max. 2 Zeilen
   - Ellipse „…“ sauber
   Voraussetzung: <span class="jsf-donor">...</span>
   ========================= */
.jsf-grid .jsf-cell.status-bezahlt {
  padding: 0.20rem 0.30rem;
}

.jsf-grid .jsf-cell.status-bezahlt .jsf-donor {
  font-size: clamp(0.6rem, 0.75vw, 0.8rem);
  line-height: 1.15;
  font-weight: 800;

  max-width: 100%;
  overflow: hidden;

  /* 2 Zeilen mit sauberem Abschneiden */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  text-overflow: ellipsis;
  word-break: break-word;
  hyphens: auto;
}

/* =========================
   Mobile
   ========================= */
@media (max-width: 768px) {
  .jsf-wrapper { width: 96%; }
  .jsf-banner-strip { gap: 4px; }
}

.jsf-intro {
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}

.jsf-intro-text {
  text-align: left;
}

.jsf-intro h2 {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
}

.jsf-intro p {
  font-size: 0.95rem;
  color: #333;
}

/* ===== JSF Menü ===== */
/* ===== JSF Menü (Text + Unterstreichung) ===== */

.jsf-nav {
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.jsf-nav .container {
  padding-top: 12px;
  padding-bottom: 0;
}

.jsf-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  gap: 24px;
  align-items: flex-end;
}

/* Link-Grundstil */
.jsf-nav-link {
  position: relative;
  display: inline-block;

  padding: 10px 2px 12px 2px;

  text-decoration: none;
  font-weight: 700;
  color: #222;

  transition: color 0.15s ease;
}

/* Hover + Active Textfarbe */
.jsf-nav-link:hover,
.jsf-nav-link.active {
  color: #ff3300;
}

/* Unterer Balken (Hover & Active) */
.jsf-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 3px;
  background-color: #ff3300;

  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.18s ease;
}

/* Balken einblenden */
.jsf-nav-link:hover::after,
.jsf-nav-link.active::after {
  transform: scaleX(1);
}

/* Mobile */
@media (max-width: 768px) {
  .jsf-nav-list {
    gap: 16px;
    justify-content: center;
  }
}