/* info.css — Typografie und Layout für die statisch migrierten
 * Wiki-Seiten unter /info/. Nutzt bewusst moderne, lesbare
 * Vorgaben (system fonts, begrenzte Breite, klare Hierarchie)
 * parallel zum schon-vorhandenen autofokus-*.css des
 * Haupt-Portals. Soll das DokuWiki-Design ersetzen, nicht
 * mit ihm konkurrieren.
 */

/* Zwei-Spalten-Grundlayout: Sidebar links, Artikel rechts.
 * Bricht unterhalb 900px auf eine Spalte um, Sidebar wandert
 * in ein <details>-artiges Verhalten (nur optisch — wir lassen
 * sie einfach oben stehen).
 */
#info-wrapper {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    max-width: 1100px;
    margin: 24px auto;
    padding: 0 24px;
}

#info-sidebar {
    flex: 0 0 240px;
    font-size: 14px;
    line-height: 1.5;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding-right: 8px;
    border-right: 1px solid #e5e5e5;
}

#info-sidebar h3 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
    margin: 18px 0 6px;
    padding: 0;
    border: 0;
}

#info-sidebar h3:first-child {
    margin-top: 0;
}

#info-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#info-sidebar li {
    margin: 0;
    padding: 2px 0;
}

#info-sidebar a {
    color: #1a3b68;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

#info-sidebar a:hover {
    border-bottom-color: #1a3b68;
}

#info-sidebar a[aria-current="page"] {
    color: #cb351b;
    font-weight: 600;
}

#info-article {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 760px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: #222;
}

#info-article h1,
#info-article h2,
#info-article h3,
#info-article h4 {
    font-weight: 600;
    line-height: 1.25;
    color: #0f2236;
}

#info-article h1,
#info-article #info-h1 {
    font-size: 30px;
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid #cb351b;
}

#info-article h2 {
    font-size: 22px;
    margin: 32px 0 12px;
}

#info-article h3 {
    font-size: 18px;
    margin: 24px 0 8px;
}

#info-article h4 {
    font-size: 16px;
    margin: 20px 0 6px;
    color: #333;
}

#info-article p {
    margin: 0 0 16px;
}

#info-article a {
    color: #1a3b68;
    text-decoration: underline;
    text-decoration-color: rgba(26, 59, 104, 0.3);
    text-underline-offset: 2px;
}

#info-article a:hover {
    text-decoration-color: #1a3b68;
}

#info-article ul,
#info-article ol {
    margin: 0 0 16px;
    padding-left: 28px;
}

#info-article li {
    margin: 4px 0;
}

#info-article strong {
    font-weight: 600;
    color: #0f2236;
}

#info-article em {
    font-style: italic;
}

#info-article img {
    max-width: 100%;
    height: auto;
    margin: 16px 0;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: #fafafa;
    padding: 4px;
}

#info-article pre,
#info-article code {
    font-family: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 14px;
}

#info-article pre {
    background: #f6f6f6;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 12px 16px;
    margin: 16px 0;
    overflow-x: auto;
    line-height: 1.5;
}

#info-article code {
    background: #f0f0f0;
    padding: 1px 5px;
    border-radius: 3px;
    /* Inline-<code> mit langen URL-Pfaden wie "…/series/{series_id}/bodies/
       {body_id}/engines/{engine_id}/editions" (z.B. in /info/dokumentation_
       der_restful_api_version_2.php Z. 765) rendert sonst als ein unbreak-
       bares min-content-Wort und sprengt den gesamten #info-article aus
       dem Lesetext-Rahmen — sichtbar als „Text läuft über den rechten Rand
       hinaus". Headless-Layout-Probe 31.05.: scrollWidth=593 vs.
       clientWidth=481, einziger Überläufer war genau diese eine <code>-Zelle.
       In <pre><code> bleibt das Verhalten unverändert, weil <pre>
       white-space: pre erzwingt und damit overflow-wrap überschreibt. */
    overflow-wrap: anywhere;
}

#info-article pre code {
    background: transparent;
    padding: 0;
}

#info-article table {
    border-collapse: collapse;
    margin: 20px 0;
    width: 100%;
    font-size: 14px;
}

#info-article table th,
#info-article table td {
    border: 1px solid #d0d0d0;
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}

#info-article table th {
    background: #f4f4f4;
    font-weight: 600;
    color: #0f2236;
}

/* Zebra mit ZWEI Grautönen statt Weiß↔Grau. Das alte Zebra (weiß vs #fafafa)
   erzeugte an jeder Zeilenkante einen harten Weiß↔Grau-Kontrast, der bei
   border-collapse die geteilte Rahmenlinie (#d0d0d0) uneben/„überschrieben"
   wirken ließ (Jochen). Zwei nahe Grautöne (~4 % und ~9 % Grau) behalten die
   Zeilen-Lesbarkeit großer Tabellen, ohne diese harte Kante. Beide bleiben
   klar heller als der #d0d0d0-Rahmen (~18 %), damit das Gitter sichtbar bleibt. */
#info-article table td {
    background: #f6f6f6;
}
#info-article table tr:nth-child(even) td {
    background: #ececec;
}

/* Tabellen-AUSBRUCH aus dem schmalen Lesetext-Rahmen.

   Problem: Das Legacy-Portal (#cont-autofokus24) ist fest 810px breit — egal
   wie breit der Monitor. Der Lesetext-Artikel bekommt davon nur ~481px. Breite
   Doku-Tabellen in diese 481px zu quetschen ist unbrauchbar (HTTP-Status-Tabelle
   wurde 3776px HOCH, schmalste Spalte 46px), und ein Scrollbalken in einem
   481px-Fenster ist sinnlos, weil die Tabellen viel zu groß sind (Jochen 31.05.).

   Lösung: Der .table-Wrapper bricht nach RECHTS aus dem Portal aus und nutzt die
   freie Bildschirmfläche bis ~20px vor dem Viewport-Rand. Links liegt die Sidebar
   (x≈259–508) — dorthin darf NICHT ausgebrochen werden (Überlappung), also nur
   rechtsbündig erweitern. Damit skaliert die nutzbare Tabellenbreite mit der
   Monitorbreite: auf 1440px+ passen alle Doku-Tabellen ohne Scroll.

   max-width = 50vw + 90px: rechnerisch die Distanz von der linken Artikelkante
   (= 50vw − 100px, ergibt sich aus 810px-Portal mittig + 305px Artikel-Offset)
   bis ~10px vor dem rechten Viewport-Rand. Die Konstanten hängen am fixen
   810px-Portal — das Legacy-Layout ist eingefroren, daher stabil.

   width:max-content + min-width:100% (=Artikelbreite): kurze Tabellen hug-gen
   ihren Inhalt und bleiben prosa-breit/-bündig; breite wachsen bis zum max-width-
   Deckel und scrollen nur, wenn sie selbst auf einem schmalen Monitor noch
   breiter sind. */
#info-article .table {
    overflow-x: auto;
    margin: 20px 0;
    box-sizing: border-box;
    width: max-content;
    min-width: 100%;
    max-width: calc(50vw + 90px);
}

#info-article .table > table {
    margin: 0;
    width: auto;
    min-width: 100%;
}

/* Spalten-Mindest-/Höchstbreite NUR auf die Zellen der gewrappten Tabelle
   selbst (Child-Kette > table > thead|tbody > tr > th|td), damit verschachtelte
   Enum-Tabellen in einer Zelle (z.B. die dealer_type-Werte in der Calculate-
   Parametertabelle) NICHT ebenfalls 7em-Spalten bekommen und ihre Elternzelle
   sprengen. min 7em verhindert das Schmal-und-hoch-Kollabieren, max 22em hält
   die Beschreibungsspalte auf Lesebreite. overflow-wrap:break-word bricht
   überlange Einzelwörter notfalls, ohne (wie anywhere) die Spalte zu schrumpfen.
   Inline-<code> mit langen URLs bricht weiter über die eigene code-Regel
   (overflow-wrap:anywhere) weiter oben. */
#info-article .table > table > thead > tr > th,
#info-article .table > table > thead > tr > td,
#info-article .table > table > tbody > tr > th,
#info-article .table > table > tbody > tr > td {
    min-width: 7em;
    max-width: 22em;
    white-space: normal;
    overflow-wrap: break-word;
}

#info-article abbr {
    border-bottom: 1px dotted #888;
    cursor: help;
    text-decoration: none;
}

/* Responsiv — ab 900px Breite stapeln */
@media (max-width: 900px) {
    #info-wrapper {
        flex-direction: column;
        padding: 0 16px;
    }
    #info-sidebar {
        flex: 1 1 auto;
        position: static;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid #e5e5e5;
        padding: 0 0 16px;
        margin-bottom: 8px;
    }
    #info-article {
        max-width: 100%;
    }
    /* Gestapeltes Layout: Sidebar liegt OBEN, der Artikel nutzt die volle
       Wrapper-Breite. Kein Rechts-Ausbruch mehr (50vw+90 würde hier sogar
       verengen) — Tabelle bleibt im Fluss und scrollt notfalls intern. */
    #info-article .table {
        width: auto;
        min-width: 0;
        max-width: 100%;
    }
}