/* ===========================================================================
   crystalworks. API-Dokumentation — Rahmen um Redoc
   ---------------------------------------------------------------------------
   Einzige Stelle fuer Farben und Schriften. Die Redoc-Theme-Optionen in
   index.html lesen dieselben Custom Properties aus, damit es keine zweite
   Quelle gibt.

   Farbwerte uebernommen aus der theme.json des crystalworks-WordPress-Themes
   (settings.color.palette), abgerufen am 17.08.2026. Die Slugs stehen als
   Kommentar dahinter, damit die Herkunft nachvollziehbar bleibt.
   =========================================================================== */

:root {
    /* --- Marke ---------------------------------------------------------- */
    --cw-yellow: #F7D463;   /* primary     — Akzent, sparsam einsetzen      */
    --cw-blue: #2D4F87;   /* blue-text   — Ueberschriften, Links         */

    /* --- Text ----------------------------------------------------------- */
    --cw-text: #202020;   /* contrast    — Fliesstext                    */
    --cw-gray: #737373;   /* gray        — Nebentext, Fusszeile          */

    /* --- Flaechen ------------------------------------------------------- */
    --cw-surface: #FFFFFF;   /* base                                        */
    --cw-surface-alt: #ECECEC;   /* table-gray  — Seitenleiste, Tabellenkopf   */
    --cw-border: #DBDBDB;   /* light-text                                  */

    /* --- Typografie ----------------------------------------------------- */
    --cw-font-text: 'Saira', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --cw-font-head: 'Glegoo', Georgia, 'Times New Roman', serif;
    /* Fallback-Kette deckt Windows (Cascadia/Consolas) und macOS
       (ui-monospace/SF Mono/Menlo) ab — ohne die macOS-Eintraege landet man
       dort bei Courier New. */
    --cw-font-code: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, SFMono-Regular, Menlo, monospace;

    /* --- Layout --------------------------------------------------------- */
    --cw-header-height: 56px;
}

/* ===========================================================================
   Schriften — ausschliesslich lokal, kein fonts.googleapis.com (DSGVO).
   Saira, Glegoo: uebernommen aus dem crystalworks-Theme, das sie ebenfalls
   lokal ausliefert. Saira ist eine Variable Font und deckt 100–900 in einer
   Datei ab.
   JetBrains Mono liegt im Theme NICHT vor und ist noch zu beschaffen; bis
   dahin greift die Monospace-Fallback-Kette oben (font-display: swap).
   Unicode-Ranges entsprechen den Subsets latin / latin-ext von Google Fonts.
   =========================================================================== */

@font-face {
    font-family: 'Saira';
    src: url('fonts/saira-100-900-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Saira';
    src: url('fonts/saira-100-900-latin-ext.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Glegoo';
    src: url('fonts/glegoo-400-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Glegoo';
    src: url('fonts/glegoo-400-latin-ext.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Glegoo';
    src: url('fonts/glegoo-700-latin.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Glegoo';
    src: url('fonts/glegoo-700-latin-ext.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/jetbrains-mono-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===========================================================================
   Grundgeruest
   =========================================================================== */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--cw-font-text);
    color: var(--cw-text);
    background: var(--cw-surface);
}

/* ===========================================================================
   Kopfzeile
   ---------------------------------------------------------------------------
   Helle Flaeche mit gelber Akzentlinie. Das Logo aus dem Theme ist mehrfarbig
   dunkelblau (#0d3880 und hellere Toene) und laesst sich nicht umfaerben —
   ein dunkler Header wuerde es unsichtbar machen.
   =========================================================================== */

.cw-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--cw-header-height);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 20px;
    background: var(--cw-surface);
    border-bottom: 3px solid var(--cw-yellow);
}

.cw-header__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.cw-header__logo {
    height: 26px;
    width: auto;
    display: block;
}

/* Ersatz-Wortmarke, solange bzw. falls das Logo fehlt */
.cw-header__wordmark {
    font-family: var(--cw-font-head);
    font-size: 18px;
    line-height: 1;
    color: var(--cw-blue);
    white-space: nowrap;
}

.cw-header__title {
    font-family: var(--cw-font-head);
    font-size: 15px;
    color: var(--cw-gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cw-header__spacer {
    flex: 1 1 auto;
}

.cw-header__link {
    font-size: 13px;
    color: var(--cw-blue);
    text-decoration: none;
    border-bottom: 1px solid var(--cw-yellow);
}

.cw-version {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--cw-gray);
}

.cw-version select {
    font-family: inherit;
    font-size: 13px;
    color: var(--cw-text);
    background: var(--cw-surface);
    border: 1px solid var(--cw-border);
    border-radius: 3px;
    padding: 4px 8px;
    cursor: pointer;
}

.cw-version select:focus-visible {
    outline: 2px solid var(--cw-blue);
    outline-offset: 1px;
}

@media (max-width: 700px) {
    .cw-header__title {
        display: none;
    }
}

/* ===========================================================================
   Hinweisleiste fuer Archivfassungen
   =========================================================================== */

.cw-notice {
    padding: 10px 20px;
    background: #FDF6E0;
    /* Aufhellung von --cw-yellow */
    border-bottom: 1px solid var(--cw-yellow);
    font-size: 14px;
    color: var(--cw-text);
}

.cw-notice a {
    color: var(--cw-blue);
    font-weight: 600;
}

/* ===========================================================================
   Redoc
   ---------------------------------------------------------------------------
   Redoc setzt die Seitenleiste auf height:100vh. Ohne diese beiden Regeln
   reicht sie unter die Kopfzeile hinaus. Das ist die einzige Layout-Korrektur
   am Standardlayout.
   =========================================================================== */

redoc .menu-content {
    top: var(--cw-header-height) !important;
    height: calc(100vh - var(--cw-header-height)) !important;
}

/* Lizenz-Badges (x-badges): seit der Kennzeichnung nach Produktstufe/Baustein
   (Full, Modul: ‹Name›, Enterprise) zeigen Navigation und Inhaltsbereich
   denselben Badge-Text aus der Spezifikation. Das fruehere ::before-Praefix
   „API “ im Inhaltsbereich ist entfallen — es haette auch „API Enterprise“
   und „API Modul: …“ erzeugt; die Bedeutung der Kennzeichen erklaert der
   Abschnitt Lizenzierung in der Einleitung. */

/* Redoc legt die Textbreite der Navigationseinträge fest auf
   `calc(100% - 38px)` — gerechnet für das Verb-Kürzel allein. Mit Badge davor
   reicht das nicht, lange Einträge wurden abgeschnitten. Das Label ist bereits
   ein Flex-Container; die feste Breite hier durch flexibles Wachsen ersetzen,
   dann verteilt Flexbox den Platz und gekürzt wird nur, wenn es wirklich nötig
   ist. Gilt für Einträge mit und ohne Badge. */
redoc .menu-content label>span[width] {
    width: auto !important;
    flex: 1 1 auto;
    min-width: 0;
}

/* Ladehinweis, bis Redoc gerendert hat */
.cw-loading {
    padding: 48px 20px;
    text-align: center;
    color: var(--cw-gray);
    font-size: 15px;
}

.cw-error {
    max-width: 640px;
    margin: 48px auto;
    padding: 20px 24px;
    border: 1px solid var(--cw-border);
    border-left: 4px solid #C0392B;
    background: var(--cw-surface-alt);
    font-size: 15px;
    line-height: 1.6;
}

.cw-error h2 {
    font-family: var(--cw-font-head);
    color: var(--cw-blue);
    margin-top: 0;
    font-size: 18px;
}

.cw-error code {
    font-family: var(--cw-font-code);
    font-size: 13px;
    background: var(--cw-surface);
    padding: 1px 4px;
    border: 1px solid var(--cw-border);
}

/* ===========================================================================
   Fusszeile
   =========================================================================== */

.cw-footer {
    padding: 24px 20px;
    background: var(--cw-surface-alt);
    border-top: 1px solid var(--cw-border);
    font-size: 13px;
    /* Nicht --cw-gray: #737373 auf #ECECEC ergibt nur 4,01:1 und verfehlt
       WCAG AA (4,5:1). Mit --cw-text sind es 13,9:1. */
    color: var(--cw-text);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
}

.cw-footer a {
    color: var(--cw-blue);
    text-decoration: none;
    border-bottom: 1px solid var(--cw-yellow);
}

.cw-footer a:hover,
.cw-footer a:focus-visible {
    border-bottom-width: 2px;
}

.cw-footer__spacer {
    flex: 1 1 auto;
}

/* ===========================================================================
   Startseite / Versionsuebersicht (versions.html)
   =========================================================================== */

.cw-page {
    max-width: 820px;
    margin: 0 auto;
    padding: 48px 20px 64px;
}

.cw-page h1 {
    font-family: var(--cw-font-head);
    color: var(--cw-blue);
    font-size: 28px;
    margin: 0 0 8px;
}

.cw-page p.cw-lead {
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 32px;
}

.cw-page a {
    color: var(--cw-blue);
}

/* Leistungsbeschreibung: Fließtextseite */
.cw-legal h2 {
    font-family: var(--cw-font-head);
    color: var(--cw-blue);
    font-size: 19px;
    margin: 32px 0 8px;
}

.cw-legal p {
    font-size: 15.5px;
    line-height: 1.7;
    margin: 0 0 14px;
    max-width: 68ch;
}

.cw-legal hr {
    border: 0;
    border-top: 1px solid var(--cw-border);
    margin: 36px 0 20px;
}

.cw-legal p.cw-legal__meta {
    font-size: 14px;
    color: var(--cw-gray);
    border-left: 3px solid var(--cw-yellow);
    padding-left: 12px;
    margin-bottom: 28px;
}

.cw-legal em {
    color: var(--cw-gray);
    font-style: normal;
    font-size: 13.5px;
}

.cw-legal ul {
    margin: 0 0 14px;
    padding-left: 22px;
    max-width: 68ch;
}

.cw-legal li {
    font-size: 15.5px;
    line-height: 1.7;
    margin: 0 0 6px;
}

/* Vergleichstabelle basic/full vs. enterprise. Fuellt die Seitenbreite und
   bricht in den Zellen um — kein horizontaler Scrollbalken. Auf schmalen
   Bildschirmen stapelt sie zu Karten (siehe Media Query unten). */
.cw-legal table {
    border-collapse: collapse;
    font-size: 14px;
    margin: 12px 0 20px;
    width: 100%;
    table-layout: fixed;
}

.cw-legal th,
.cw-legal td {
    text-align: left;
    vertical-align: top;
    padding: 8px 12px;
    border-bottom: 1px solid var(--cw-border);
    overflow-wrap: break-word;
    hyphens: auto;
}

.cw-legal th {
    font-family: var(--cw-font-head);
    font-weight: 400;
    color: var(--cw-blue);
    background: var(--cw-surface-alt);
}

.cw-legal th:first-child,
.cw-legal td:first-child {
    width: 24%;
}

.cw-legal td:first-child {
    font-weight: 600;
}

/* Schmale Bildschirme: jede Zeile wird eine Karte. Das Kriterium
   (erste Spalte) ist die Kartenueberschrift, die uebrigen Zellen zeigen
   ihren Spaltenkopf als Label (data-label aus dem Markdown-Wandler). */
@media (max-width: 640px) {
    .cw-legal table,
    .cw-legal tbody,
    .cw-legal tr,
    .cw-legal td {
        display: block;
        width: auto;
    }

    .cw-legal thead {
        display: none;
    }

    .cw-legal tr {
        border: 1px solid var(--cw-border);
        border-radius: 6px;
        margin: 0 0 12px;
        overflow: hidden;
    }

    .cw-legal td {
        border-bottom: 0;
        padding: 8px 12px;
    }

    .cw-legal td:first-child {
        width: auto;
        font-family: var(--cw-font-head);
        font-weight: 400;
        color: var(--cw-blue);
        background: var(--cw-surface-alt);
        border-bottom: 1px solid var(--cw-border);
    }

    .cw-legal td + td {
        border-top: 1px solid var(--cw-border);
    }

    .cw-legal td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--cw-gray);
        margin-bottom: 2px;
    }
}

.cw-versions {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.cw-versions th,
.cw-versions td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--cw-border);
}

.cw-versions th {
    font-family: var(--cw-font-head);
    color: var(--cw-blue);
    background: var(--cw-surface-alt);
    font-weight: 400;
}

.cw-versions a {
    color: var(--cw-blue);
    text-decoration: none;
    border-bottom: 1px solid var(--cw-yellow);
}

.cw-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--cw-yellow);
    color: var(--cw-blue);
    font-size: 12px;
    font-weight: 600;
}