/* ==========================================================================
   style.css
   Ziel: Bootstrap 5.3 nutzen + Word-HTML (Tabellen mit class="table table-responsive …")
   - Konsistenter Rand (Container-Gutter)
   - Ruhige Typografie (ohne harte Sprünge)
   - Tabellen: 1. Spalte (Produktname/TOC) nicht hässlich umbrechen
              letzte Spalte (Beschreibung/Links) darf flexibel umbrechen
              bei schmalen Viewports lieber horizontal scrollen
   ========================================================================== */

/* --- Layout / Rand (Bootstrap-konform) ----------------------------------- */
/* 1rem links + 1rem rechts (Bootstrap halbiert intern) */
.container,
.container-fluid{
  --bs-gutter-x: 2rem;
}

/* --- Typografie ---------------------------------------------------------- */
/* Ruhige, weiche Skalierung statt Sprüngen */
body{
  font-size: clamp(16px, 0.9vw + 14px, 19px);
  line-height: 1.5;
}

/* --- Bilder -------------------------------------------------------------- */
img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* --- Tabellen: Grundsätzliches ------------------------------------------ */
/* (Bootstrap .table ist i.d.R. schon width:100%; das ist nur zur Sicherheit) */
table{
  width: 100%;
}

/* ==========================================================================
   Tabellen-Feintuning (typisches Muster: Spalte 1 kurz, letzte Spalte Text)
   Hinweis: Du nutzt "table-responsive" direkt am <table> (nicht als Wrapper),
            daher das CSS-Fallback mit overflow-x auf dem table selbst.
   ========================================================================== */

/* Bei schmalen Viewports (z.B. halbe Notebook-Breite) lieber scrollen als zerhacken */
@media (max-width: 991.98px){
  table.table-responsive{
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 1. Spalte (Produktname/TOC): NICHT innerhalb von Wörtern umbrechen */
table.table-responsive th:first-child,
table.table-responsive td:first-child{
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

/* Spalten 2..n (Beschreibung, ggf. Links): dürfen flexibel umbrechen */
table.table-responsive th:not(:first-child),
table.table-responsive td:not(:first-child){
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Sichtbare Links: v.a. in Beschreibungen -> nur dort aggressiver umbrechen */
table.table-responsive th:not(:first-child) a,
table.table-responsive td:not(:first-child) a{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Sonderfall: einzellige Tabellen (deine Kommentarboxen) sollen weiter gut umbrechen */
table.table-responsive th:only-child,
table.table-responsive td:only-child,
table.table-responsive th:only-child a,
table.table-responsive td:only-child a{
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* --- Links außerhalb von Tabellen: moderat umbrechen --------------------- */
/* (bricht lange URLs bei Bedarf, ohne überall "anywhere" zu erzwingen) */
a{
  overflow-wrap: break-word;
}


/* ===== Hub: responsive quicklinks (<=600px) ===== */

.quicklinks-desktop,
.quicklinks-mobile,
.startpath { font-size: 0.9rem; }
@media (max-width: 600px) {
  .quicklinks-mobile,
  .startpath { font-size: 1rem; }   /* Mobile gut lesbar */
}


/* Desktop default */
.quicklinks-desktop { display: block; }
.quicklinks-mobile  { display: none; }

/* Mobile: Direktzugriff einklappen, Startpfad bleibt normal */
@media (max-width: 600px) {
  .quicklinks-list { padding-left: 1.1em; }
}
@media (max-width: 600px) {
  .quicklinks-desktop { display: none; }
  .quicklinks-mobile  { display: block; margin: 0 0 2px 0; }

  .quicklinks-mobile summary { cursor: pointer; }
  .quicklinks-mobile summary::-webkit-details-marker { display: none; } /* optional */

  .quicklinks-mobile summary::before { content: "▸ "; }
  .quicklinks-mobile[open] summary::before { content: "▾ "; }

  .quicklinks-list { margin-top: 4px; }
  .quicklinks-list a { display: block; padding: 2px 0; }
}

@media (max-width: 600px) {
  .quicklinks-mobile summary {
    cursor: pointer;
    list-style: none;      /* wichtig */
  }

  /* Marker in WebKit/Blink ausblenden */
  .quicklinks-mobile summary::-webkit-details-marker {
    display: none;
  }

  /* Marker in Firefox ausblenden */
  .quicklinks-mobile summary::marker {
    content: "";
  }

  /* Dein eigener Pfeil */
  .quicklinks-mobile summary::before { content: "▸ "; }
  .quicklinks-mobile[open] summary::before { content: "▾ "; }
}

.quicklinks-list a.ql-link { padding: 4px 0; text-decoration: none; }
.quicklinks-list .ql-hint  { display: block; font-size: 0.85em; opacity: 0.75; }



/* PDF: Desktop/Tablet eingebettet, Smartphone nur Link */
.pdfBlock { 
  margin: 0.5rem 0 1rem; 
}

.pdfDesktop iframe{
  display: block;
  width: 100%;
  height: 80vh;
  max-height: 900px;
  border: 0;
}

.pdfMobile{ 
  display: none; 
}

/* Smartphone/Touch: Einbettung ausblenden, Link zeigen */
@media (max-width: 700px) and (pointer: coarse){
  .pdfDesktop{ display: none; }
  .pdfMobile{ display: block; }
}


/* temporär wg. Kompatibilität in Änderungphase, danach entfernen --- PDF-Embed: responsive Höhe (Desktop + Mobile) */
.pdfWrap object,
.pdfWrap embed,
.pdfWrap iframe {
  width: 100%;
  height: min(80vh, 900px);
  border: 0;
}

/* Optional: etwas Luft darunter */
.pdfWrap {
  margin: 0.5rem 0 1rem;
}

@media (max-width: 600px) {
  .pdfWrap object,
  .pdfWrap embed,
  .pdfWrap iframe {
    height: 85vh;
  }
}


/* --- */

/* Schutz vor einfachen Scrapern durch visuelle Umkehrung */
.reverse-text {
    unicode-bidi: bidi-override;
    direction: rtl;
    text-align: left;
    display: inline-block;
}

/* --- */