/* ==========================================================================
   CapCorn OTA Services - Dokumentation
   Eigenstaendiges Stylesheet fuer OtaServiceDescription.aspx und die
   zugehoerigen Service-Unterseiten. Beruehrt Site.css bewusst nicht, da
   dieses sitebreit fuer die Admin-Oberflaeche verwendet wird.
   ========================================================================== */

/* CapCorn CI-Schrift (wie in CapServer Web/Styles/Site_2023.css) - selbe gehostete Datei, */
/* damit hier keine zweite Kopie/Version des Fonts gepflegt werden muss. */
@font-face {
    font-family: 'LensGrotesk-Light';
    font-style: normal;
    font-weight: 400;
    src: url(https://mainframe.capcorn.net/ressourcen/MB_9100/LensGrotesk-Light.otf) format('opentype');
}

/* IBM Plex Mono nur fuer echte technische Tokens (HTTP-Methode, URLs, XML-Feldnamen) -
   die CI stellt dafuer keine eigene Auszeichnungsschrift bereit. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* Site.css begrenzt body sitebreit auf max-width:950px (Alt-Layout der Admin-Oberflaeche).
   OtaDocs.css laedt ausschliesslich auf diesen 6 Doku-Seiten, daher hier gefahrlos
   ueberschreibbar, um auf breiten Bildschirmen nicht unnoetig schmal zu wirken. */
body {
    max-width: none;
    min-width: 0;
    padding: 0;
    background: #F1F1F1;
}

.otaDocs {
    /* CapCorn CI (Markenhandbuch 2023): Electric Blue, True Black, White als
       Primaerfarben; Coral Red als Sekundaerfarbe (statt eines frei gewaehlten Ambers). */
    --ink: #000000;
    --board: #2C48E1;
    --board-line: #1A2FAE;
    --blue: #2C48E1;
    --blue-dark: #1F34A8;
    --accent: #F84260;
    --accent-dark: #D62A46;
    --paper: #F1F1F1;
    --paper-raised: #FFFFFF;
    --line: #E2E2E2;
    --text: #000000;
    --muted: #5C5C5C;

    font-family: 'LensGrotesk-Light', Arial, sans-serif;
    color: var(--text);
    background: var(--paper);
    padding: 0 0 64px 0;
}

.otaDocs * { box-sizing: border-box; }

.otaDocs a { color: var(--blue-dark); }
.otaDocs a:hover { color: var(--accent-dark); }

.otaDocs code,
.otaDocs .mono {
    font-family: 'IBM Plex Mono', 'Consolas', monospace;
}

/* -- Kopfbereich / "Board" ------------------------------------------------ */

.otaDocs__hero {
    background: var(--board);
    color: #ffffff;
    padding: 40px 56px 32px 56px;
}

.otaDocs__heroInner {
    max-width: 900px;
    margin: 0 auto;
}

.otaDocs__breadcrumb {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 18px;
}

.otaDocs__breadcrumb a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.otaDocs__breadcrumb a:hover {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

.otaDocs__title {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 8px 0;
    color: #ffffff;
}

.otaDocs__lede {
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    max-width: 640px;
    margin: 0;
}

/* -- Service-Leiste (Navigation zwischen den 5 Dokumenten) ---------------- */

.otaDocs__strip {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: 28px;
    border-top: 1px solid var(--board-line);
    padding-top: 2px;
}

a.otaDocs__stripItem {
    flex: 1 1 auto;
    min-width: 150px;
    padding: 10px 14px;
    font-size: 12.5px;
    line-height: 1.35;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.06);
    border-bottom: 2px solid transparent;
}

.otaDocs__stripItem strong {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.otaDocs__stripItem:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

a.otaDocs__stripItem--active {
    background: rgba(255, 255, 255, 0.16);
    border-bottom-color: #ffffff;
    color: #ffffff;
}

.otaDocs__stripItem--active strong { color: #ffffff; }

/* -- Inhaltsspalte --------------------------------------------------------- */

.otaDocs__body {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 56px 0 56px;
}

/* Fliesstext etwas schmaler halten als Code-/Spec-Bloecke (die von der vollen
   Breite profitieren, um horizontales Scrollen bei langen XML-Zeilen zu vermeiden). */
.otaDocs__prose,
.otaDocs__body h2,
.otaDocs__body h3,
.otaDocs__body h4,
.otaDocs__fields {
    max-width: 760px;
}

.otaDocs__body h2 {
    font-size: 21px;
    font-weight: 600;
    color: var(--ink);
    margin: 44px 0 14px 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.otaDocs__body h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.otaDocs__body h3 {
    font-size: 16.5px;
    font-weight: 600;
    color: var(--ink);
    margin: 30px 0 10px 0;
}

.otaDocs__body h4 {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--muted);
    margin: 22px 0 10px 0;
}

.otaDocs__prose {
    text-align: left;
    line-height: 1.62;
    font-size: 14.5px;
    margin-bottom: 14px;
}

.otaDocs__prose:last-child { margin-bottom: 0; }

/* -- Request/Response "Karte" ---------------------------------------------- */

.otaDocs__spec {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue);
    padding: 16px 18px;
    margin: 18px 0 22px 0;
    font-size: 13px;
}

.otaDocs__specRow {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 0;
}

.otaDocs__specRow + .otaDocs__specRow {
    border-top: 1px dashed var(--line);
}

.otaDocs__specLabel {
    flex: 0 0 auto;
    width: 68px;
    font-size: 11px;
    color: var(--muted);
    text-transform: none;
}

.otaDocs__specValue {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12.5px;
    color: var(--text);
    word-break: break-all;
}

.otaDocs__method {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 2px;
    color: #ffffff;
}

.otaDocs__method--get { background: var(--blue); }
.otaDocs__method--post { background: var(--accent-dark); }

/* -- Definitionsliste fuer Feldbeschreibungen ------------------------------ */

.otaDocs__fields {
    margin: 0 0 22px 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
}

.otaDocs__fields > li {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.otaDocs__fieldName {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    color: var(--blue-dark);
    margin-bottom: 4px;
}

.otaDocs__fieldDesc {
    font-size: 14px;
    line-height: 1.58;
}

.otaDocs__fieldDesc p { margin: 0 0 8px 0; }
.otaDocs__fieldDesc p:last-child { margin-bottom: 0; }

/* Generische Listen (Aufzaehlungen, die tatsaechlich Reihenfolge/Menge sind) */

.otaDocs__body ul,
.otaDocs__body ol {
    padding-left: 22px;
    margin: 0 0 16px 0;
    font-size: 14.5px;
    line-height: 1.6;
}

.otaDocs__body ul.otaDocs__fields { padding-left: 0; }

.otaDocs__gallery {
    list-style: none;
    padding: 0;
    margin: 18px 0;
}

.otaDocs__gallery > li {
    margin-bottom: 18px;
    font-size: 14px;
}

.otaDocs__gallery figure { margin: 8px 0 0 0; }

/* -- Abbildungen ------------------------------------------------------------ */

.otaDocs__figure {
    margin: 18px 0 26px 0;
}

.otaDocs__figure img {
    display: block;
    max-width: 100%;
    border: 1px solid var(--line);
    background: var(--paper-raised);
}

.otaDocs__figure figcaption {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 6px;
}

/* -- XML-Codebeispiele (Alternative zu Screenshot-Abbildungen) ------------- */

.otaDocs__code {
    background: var(--ink);
    color: #E7E9ED;
    margin: 18px 0 26px 0;
    padding: 18px 20px;
    overflow-x: auto;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12.5px;
    line-height: 1.65;
    white-space: pre;
}

.otaDocs__code .tag { color: #7FA8FF; }
.otaDocs__code .attr { color: #82C9C0; }
.otaDocs__code .str { color: #E3B778; }
.otaDocs__code .cmt { color: #7A8290; font-style: italic; }
.otaDocs__code .punct { color: #7A8290; }

/* -- Hinweis-/Warnboxen ----------------------------------------------------- */

.otaDocs__notice {
    background: #FDECEE;
    border-left: 3px solid var(--accent);
    padding: 14px 16px;
    margin: 20px 0;
    font-size: 14px;
    line-height: 1.6;
}

.otaDocs__notice strong { color: var(--accent-dark); }

.otaDocs__notice--index {
    max-width: 900px;
    margin: 24px auto 0 auto;
}

.otaDocs__notice--danger {
    background: #FBEDEA;
    border-left-color: #C0432B;
}

.otaDocs__notice--danger strong { color: #A6371F; }

/* -- Service-Board auf der Uebersichtsseite -------------------------------- */

.otaDocs__board {
    max-width: 900px;
    margin: 32px auto 0 auto;
    padding: 0 56px 40px 56px;
}

.otaDocs__boardIntro {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text);
    margin-bottom: 24px;
}

.otaDocs__boardIntro strong { color: var(--ink); }

.otaDocs__boardList {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
}

.otaDocs__boardList > li {
    padding: 20px 4px;
    border-bottom: 1px solid var(--line);
}

.otaDocs__boardRowHead {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}

.otaDocs__boardCode {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--blue-dark);
}

.otaDocs__boardModel {
    font-size: 12px;
    color: var(--muted);
    padding: 1px 8px;
    background: var(--paper-raised);
    border: 1px solid var(--line);
}

.otaDocs__boardDesc {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted);
    margin-top: 6px;
    max-width: 620px;
}

.otaDocs__boardBtn {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #ffffff !important;
    background: var(--blue);
    text-decoration: none;
}

.otaDocs__boardBtn:hover {
    background: var(--blue-dark);
}

.otaDocs__footer {
    max-width: 900px;
    margin: 8px auto 0 auto;
    padding: 24px 56px 0 56px;
    text-align: center;
}

.otaDocs__footer img { opacity: 0.85; }

/* -- Responsive -------------------------------------------------------------- */

@media (max-width: 720px) {
    .otaDocs__hero,
    .otaDocs__body,
    .otaDocs__board,
    .otaDocs__footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .otaDocs__specRow {
        flex-direction: column;
        gap: 2px;
    }

    .otaDocs__specLabel { width: auto; }

    .otaDocs__boardRowHead {
        flex-direction: column;
        gap: 4px;
    }
}