/* === URTEILE 8-COLUMN CARD LAYOUT (FINAL) =============================== */

/* Page width */
.page{ max-width:1600px !important; }

/* Make cards fill the table cell cleanly */
.card{ display:block !important; width:100% !important; }

/* 8 equal columns grid */
.card .details{
  display:grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap:12px 16px !important;
  align-items:start !important;
}

/* Reset any 100% widths from other CSS */
.card .details > .judcol{
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
  min-width:0 !important;
  width:auto !important;
  max-width:none !important;
  flex:0 0 auto !important;
}

/* Labels/values */
.card .details .label{ font-weight:800; opacity:.9; font-size:.9rem }
.card .details .value{ line-height:1.35 }

/* Positioning (based on semantic classes added by JS) */
.card .details .fn    { grid-column:1; grid-row:1; }
.card .details .date  { grid-column:1; grid-row:2; }

.card .details .title { grid-column:2; grid-row:1 / span 2; }

.card .details .judge { grid-column:3; grid-row:1 / span 2; }

.card .details .type  { grid-column:4; grid-row:1; }
.card .details .link  { grid-column:4; grid-row:2; }

/* Strafen a bit wider: span two columns (5-6) */
.card .details .strafe{ grid-column:5 / span 2; grid-row:1 / span 2; }

/* Status in the last two columns (7-8) */
.card .details .status{ grid-column:7 / span 2; grid-row:1 / span 2; }

/* DataTables cell padding reset to let card use full width */
#urteileTable tbody td{ padding:0 !important; }

/* === 9 Spalten: FN, Datum, Titel, Rechtsart, Richter, Link, Strafen, Bemerkungen, Status === */
.page{ max-width:1600px !important; }
.card{ display:block !important; width:100% !important; }

.card .details{
  display:grid !important;
  grid-auto-flow:dense !important;
  grid-template-columns: 0.7fr 0.7fr 1.5fr 0.7fr 1.7fr 1fr 1.3fr 2fr 2fr !important;
  /*                     FN  DT   TIT   RA   RIC  LINK  STRAF  BEM   STATUS  */
  column-gap:12px !important;
  row-gap:6px !important;
  align-items:start !important;
}

/* Reset alte Spans/Breiten */
.card .details .judcol{
  grid-column:auto !important;
  grid-row:auto !important;
  min-width:0 !important; width:auto !important; max-width:none !important;
  display:flex !important; flex-direction:column !important; gap:4px !important;
}

/* eindeutige Platzierung */
.card .details .fn      { grid-column:1 !important; }
.card .details .date    { grid-column:2 !important; }
.card .details .title   { grid-column:3 !important; }
.card .details .type    { grid-column:4 !important; }
.card .details .judge   { grid-column:5 !important; }
.card .details .link    { grid-column:6 !important; }
.card .details .strafe  { grid-column:7 !important; }
.card .details .remarks { grid-column:8 !important; }
.card .details .status  { grid-column:9 !important; }

/* kleine Feinschliffe */
.card .details .label{ margin-bottom:2px !important; font-weight:800; opacity:.9 }
.card .details .value{ line-height:1.35 }
.card .details .status .badges{ display:flex; flex-wrap:wrap; gap:6px }
#urteileTable tbody td{ padding:0 !important; vertical-align:top !important; }

/* === "Urteil öffnen" als Badge-Button (wie Status) =================== */
.card .details .link .value a.doc{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border:1px solid rgba(34,197,94,.40);   /* grün wie "veröffentlicht" */
  border-radius:999px;
  background:rgba(34,197,94,.06);
  color:#e8eef9;                          /* helle Schrift wie Status */
  font-weight:700;
  text-decoration:none;
  line-height:1.2;
  transition:background .15s ease, border-color .15s ease, transform .03s ease;
}
.card .details .link .value a.doc:hover{
  background:rgba(34,197,94,.12);
  border-color:rgba(34,197,94,.60);
  text-decoration:none;
}
.card .details .link .value a.doc:active{
  transform:translateY(1px);
}
.card .details .link .value a.doc:focus-visible{
  outline:2px solid rgba(34,197,94,.55);
  outline-offset:2px;
  border-color:rgba(34,197,94,.70);
}
.card .details .link .value a.doc i{
  font-size:.95em;
  opacity:.9;
}