/* ==================================================
   Releasenotes – Flat, Modern, Responsive
   Accent: #0069b4 | Font: Roboto
   Desktop: kein Querscroll
   Mobile: Cards mit Labels
   ================================================== */

.rn{
  --rn-accent:#0069b4;
  --rn-ink:#0d2b3e;
  --rn-muted:#51606b;
  --rn-border: rgba(13,43,62,.18);
  --rn-bg:#ffffff;
  color: var(--rn-ink);
}

/* Roboto überall im Modul (auch API-HTML) */
.rn, .rn *{
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
  box-sizing: border-box;
}

/* Header */
.rn__head{ margin-bottom: 18px; }
.rn__title{ margin:0 0 6px 0; font-size:28px; font-weight:700; }
.rn__intro{ margin:0; color: var(--rn-muted); }

/* Layout (Grid) */
.rn__layout{
  display:grid;
  grid-template-columns: 360px minmax(0,1fr);
  gap: 24px;
  align-items: start;
}
.rn__nav, .rn__content{ min-width:0; max-width:100%; }

/* Left Nav */
.rn__nav{
  border:1px solid var(--rn-border);
  background: var(--rn-bg);
}
.rn__navTitle{
  padding: 12px 14px;
  font-weight:700;
  border-bottom:1px solid var(--rn-border);
}
.rn__list{
  list-style:none;
  margin:0;
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.rn__item{
  width:100%;
  text-align:left;
  background:transparent;
  border:1px solid var(--rn-border);
  padding: 10px 12px;
  cursor:pointer;
}
.rn__item:hover{ border-color: var(--rn-accent); }
.rn__item.is-active{
  border-color: var(--rn-accent);
  background: rgba(0,105,180,.06);
}
.rn__ver{ display:block; font-weight:700; }
.rn__date{ display:block; font-size:12px; color: var(--rn-muted); margin-top:2px; }

/* Sticky Nav Desktop */
@media (min-width: 731px){
  .rn__nav{
    position: sticky;
    top: 90px;
    align-self: start;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }
}

/* Content */
.rn__content{
  border:1px solid var(--rn-border);
  background: var(--rn-bg);
  min-height: 320px;
  overflow: hidden; /* verhindert Layout-Breite */
}
.rn__contentHead{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap:10px;
  padding: 12px 14px;
  border-bottom:1px solid var(--rn-border);
}
.rn__contentTitle{ font-weight:700; }
.rn__status{ font-size:12px; color: var(--rn-muted); }

/* Notes */
.rn__notes{
  padding: 14px;
  line-height: 1.55;
  color:#22323c;

  /* ✅ Desktop: KEIN Querscroller */
  overflow-x: hidden;

  /* lange Inhalte umbrechen */
  overflow-wrap:anywhere;
  word-break:break-word;
}
.rn__notes *{ max-width:100%; }

/* Tabellen Desktop/Tablet: passen sich an, umbrechen statt scrollen */
@media (min-width: 731px){
  .rn__notes table{
    width:100% !important;
    max-width:100% !important;
    border-collapse: collapse;
    margin: 12px 0;
    table-layout: auto;     /* ✅ wichtig: anpassen statt fix */
  }
  .rn__notes th, .rn__notes td{
    border:1px solid var(--rn-border);
    padding: 10px;
    vertical-align: top;

    /* ✅ kein Querscroll: umbrechen */
    white-space: normal;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .rn__notes th{
    background:#f7f8fa;
    font-weight:700;
  }
}

/* Links */
.rn__notes a{
  color: var(--rn-accent);
  text-decoration:none;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.rn__notes a:hover{ text-decoration:underline; }

.rn__notes pre, .rn__notes code{
  max-width:100%;
  overflow-x:auto; /* Code darf scrollen, das ist ok */
}

/* Alerts */
.rn__alert{
  border:1px solid rgba(180,0,0,.35);
  background: rgba(180,0,0,.06);
  padding: 12px 14px;
  margin: 12px 0;
  color:#6b1b1b;
}
.rn__empty{ color: var(--rn-muted); }

/* Dropdown */
.rn__picker{
  display:none;
  border:1px solid var(--rn-border);
  padding: 12px 14px;
  background: var(--rn-bg);
}
.rn__label{
  display:block;
  font-size:12px;
  color: var(--rn-muted);
  margin-bottom:6px;
}
.rn__select{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--rn-border);
  background:#fff;
}

/* ==================================================
   Breakpoints
   ================================================== */

@media (max-width:1400px){
  .rn__layout{ grid-template-columns: 340px minmax(0,1fr); }
}

@media (max-width:1200px){
  .rn__layout{ grid-template-columns: 320px minmax(0,1fr); gap:18px; }
  .rn__title{ font-size:26px; }
}

/* <1200: Menü zu Dropdown */
@media (max-width:1199px){
  .rn__layout{ grid-template-columns: 1fr; }
  .rn__nav{ display:none; }
  .rn__picker{ display:block; }
}

/* ==================================================
   Mobile: Tables -> Cards (übersichtlich)
   ================================================== */

@media (max-width:1199px){

  /* keine Silbentrennung */
  .rn__notes, .rn__notes *{
    hyphens:none;
    -webkit-hyphens:none;
    word-break:normal;
    overflow-wrap:anywhere;
  }

  /* Tabelle als Cards */
  .rn__notes table{
    width:100% !important;
    border-collapse: separate;
    border-spacing: 0;
    margin: 12px 0;
  }

  /* Kopfzeile weg -> nicht verwirren */
  .rn__notes thead{ display:none; }
  .rn__notes tbody{ display:block; }

  .rn__notes tr{
    display:block;
    border:1px solid var(--rn-border);
    margin: 0 0 12px 0;
    background:#fff;
  }

  .rn__notes td{
    display:block;
    width:100%;
    border:0;
    border-top:1px solid var(--rn-border);
    padding:10px 12px;
  }
  .rn__notes td:first-child{ border-top:0; }

  /* Label + Inhalt: klarer */
  .rn__notes td[data-label]::before{
    content: attr(data-label);
    display:block;
    font-size:12px;
    color: var(--rn-muted);
    margin: 0 0 4px 0;
    font-weight:700;
  }

  /* Inhalt etwas ruhiger */
  .rn__notes td{ line-height:1.45; }
}

/* <=540: etwas kompakter */
@media (max-width:540px){
  .rn__title{ font-size:22px; }
  .rn__notes{ padding:12px; }
  .rn__contentHead{ padding:10px 12px; }
}

/* <=300 */
@media (max-width:300px){
  .rn__title{ font-size:20px; }
  .rn__notes{ padding:10px; }
  .rn__select{ padding:8px 10px; }
}


/* ===== PATCH: Cards NUR für große Release-Tabellen ===== */
@media (max-width:1199px){
  /* Standard: Tabellen normal lassen */
  .rn__notes table{ display: table; }
  .rn__notes thead{ display: table-header-group; }
  .rn__notes tbody{ display: table-row-group; }
  .rn__notes tr{ display: table-row; border: 0; margin: 0; }
  .rn__notes td{ display: table-cell; border:1px solid var(--rn-border); }

  /* NUR wenn JS die Tabelle als Release-Tabelle markiert */
  .rn__notes table.is-release-table{
    width:100% !important;
    border-collapse: separate;
    border-spacing: 0;
    margin: 12px 0;
  }
  .rn__notes table.is-release-table thead{ display:none; }
  .rn__notes table.is-release-table tbody{ display:block; }

  .rn__notes table.is-release-table tr{
    display:block;
    border:1px solid var(--rn-border);
    margin: 0 0 12px 0;
    background:#fff;
  }
  .rn__notes table.is-release-table td{
    display:block;
    width:100%;
    border:0;
    border-top:1px solid var(--rn-border);
    padding:10px 12px;
  }
  .rn__notes table.is-release-table td:first-child{ border-top:0; }

  .rn__notes table.is-release-table td[data-label]::before{
    content: attr(data-label);
    display:block;
    font-size:12px;
    color: var(--rn-muted);
    margin: 0 0 4px 0;
    font-weight:700;
  }
}

/* Mobile Fallback: wenn Tabellen doch mal normal bleiben,
   verhindere Buchstaben-Spalten (Beschreibung) */
@media (max-width:1199px){
  .rn__notes th,
  .rn__notes td{
    word-break: normal !important;
    white-space: normal !important;
  }
}

/* ==========================
   Mobile Tabelle-Fixes
   - Meta-Tabellen (2 Spalten): stack (Key oben, Value unten)
   - Release-Tabellen (3+ Spalten): Cards mit Labels
   ========================== */
@media (max-width:1199px){

  /* generelle Lesbarkeit */
  .rn__notes, .rn__notes *{
    hyphens:none;
    -webkit-hyphens:none;
    word-break:normal !important;
    overflow-wrap:anywhere;
  }

  /* ---- META TABLE (2 Spalten) ---- */
  .rn__notes table.is-meta-table{
    width:100% !important;
    border-collapse: separate;
    border-spacing: 0;
    margin: 12px 0;
  }

  .rn__notes table.is-meta-table tr{
    display:block;
    border:1px solid var(--rn-border);
    margin: 0 0 12px 0;
    background:#fff;
  }

  .rn__notes table.is-meta-table td,
  .rn__notes table.is-meta-table th{
    display:block;
    width:100%;
    border:0;
    border-top:1px solid var(--rn-border);
    padding:10px 12px;
    white-space: normal !important;
  }

  .rn__notes table.is-meta-table tr > *:first-child{
    border-top:0;
    font-weight:700;
    background:#f7f8fa; /* optional, sehr dezent */
  }

  /* ---- RELEASE TABLE (3+ Spalten) -> CARDS ---- */
  .rn__notes table.is-release-table{
    width:100% !important;
    border-collapse: separate;
    border-spacing: 0;
    margin: 12px 0;
  }

  .rn__notes table.is-release-table thead{ display:none; }
  .rn__notes table.is-release-table tbody{ display:block; }

  .rn__notes table.is-release-table tr{
    display:block;
    border:1px solid var(--rn-border);
    margin: 0 0 12px 0;
    background:#fff;
  }

  .rn__notes table.is-release-table td{
    display:block;
    width:100%;
    border:0;
    border-top:1px solid var(--rn-border);
    padding:10px 12px;
  }

  .rn__notes table.is-release-table td:first-child{
    border-top:0;
    font-weight:700;
  }

  .rn__notes table.is-release-table td[data-label]::before{
    content: attr(data-label);
    display:block;
    font-size:12px;
    color: var(--rn-muted);
    margin: 0 0 4px 0;
    font-weight:700;
  }
}


/* ===== FINAL PATCH: Verhindert "Kom po nen ten" Header auf Mobile ===== */
@media (max-width:1199px){

  /* Wenn eine Tabelle als Release-Tabelle markiert ist:
     verstecke JEDE Header-Zeile – egal ob thead existiert oder nicht */
  .rn__notes table.is-release-table thead{
    display:none !important;
  }

  /* Fallback: erste Zeile aus THs ebenfalls verstecken (kein thead vorhanden) */
  .rn__notes table.is-release-table tr:has(th){
    display:none !important;
  }

  /* Falls :has() im Browser nicht greift (ältere), dann: alle th unsichtbar */
  .rn__notes table.is-release-table th{
    display:none !important;
  }
}

/* ===== Mobile: Cards sollen volle Breite nutzen ===== */
@media (max-width:1199px){
  .rn__notes{
    width: 100% !important;
  }

  /* Release-Cards */
  .rn__notes table.is-release-table,
  .rn__notes table.is-release-table tbody,
  .rn__notes table.is-release-table tr{
    display: block !important;
    width: 100% !important;
  }

  .rn__notes table.is-release-table td{
    display: block !important;
    width: 100% !important;
  }

  /* Meta-Table Cards */
  .rn__notes table.is-meta-table,
  .rn__notes table.is-meta-table tbody,
  .rn__notes table.is-meta-table tr{
    display: block !important;
    width: 100% !important;
  }

  .rn__notes table.is-meta-table td,
  .rn__notes table.is-meta-table th{
    display: block !important;
    width: 100% !important;
  }
}

/* >=1200: Desktop erzwingen (Reset gegen Card-Styles) */
@media (min-width:1200px){
  .rn__picker{ display:none !important; }
  .rn__nav{ display:block !important; }
  .rn__layout{ grid-template-columns: 360px minmax(0,1fr) !important; }

  .rn__notes table{
    display: table !important;
  }
  .rn__notes thead{
    display: table-header-group !important;
  }
  .rn__notes tbody{
    display: table-row-group !important;
  }
  .rn__notes tr{
    display: table-row !important;
    border: 0 !important;
    margin: 0 !important;
  }
  .rn__notes td, .rn__notes th{
    display: table-cell !important;
    border: 1px solid var(--rn-border) !important;
  }
}


/* ==================================================
   FINAL FIX: Klare, eckige Borders
   - keine Rundungen
   - keine Schatten
   - Borders bleiben sichtbar
   ================================================== */

/* NIEMALS runden */
.rn,
.rn *{
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Content-Rahmen klar */
.rn__content{
  border:1px solid var(--rn-border);
  background:#fff;
}

/* Innenabstand sorgt dafür, dass nichts „anklebt“ */
.rn__notes{
  padding: 16px;
  background:#fff;
}

/* Tabellen: ganz normal, eckig, stabil */
.rn__notes table{
  width:100% !important;
  border-collapse: collapse !important;
  border:1px solid var(--rn-border) !important;
  background:#fff;
}

/* Zellen */
.rn__notes th,
.rn__notes td{
  border:1px solid var(--rn-border) !important;
  padding:10px 12px;
  vertical-align: top;
  background:#fff;
  white-space: normal;
  word-break: break-word;
}

/* Tabellen-Header */
.rn__notes th{
  background:#f7f8fa;
  font-weight:700;
}

/* Mobile Cards: auch eckig */
@media (max-width:730px){
  .rn__notes table.is-release-table tr,
  .rn__notes table.is-meta-table tr{
    border:1px solid var(--rn-border);
    background:#fff;
  }
}