/* Optik der API-Endpunkt-Seiten. Farben und Formen folgen dem Handbuch-Baukasten
   (Grün #9db61d, Petrol #2d3e50, Rahmen #e2e0db) - siehe belbo-custom.css im Theme.
   Wird nur auf den Endpunkt-Seiten geladen (siehe belbo_api_docs_assets()). */

.belbo-api-breadcrumb {
	margin: 0 0 6px;
	font-size: 0.85em;
	color: #888;
}
.belbo-api-breadcrumb a {
	color: #888;
}

/* --- Methode + URL als Kopfzeile des Endpunkts --- */
.belbo-api-endpoint {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	margin: 1.4em 0;
	border-radius: 3px;
	overflow: hidden;
	background: #2d3e50;
}
.belbo-api-method {
	flex: 0 0 auto;
	padding: 12px 14px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
}
.belbo-api-method-get {
	background: #2f7d3a;
}
.belbo-api-method-post {
	background: #1f6f9a;
}
.belbo-api-url {
	flex: 1 1 300px;
	padding: 12px 14px;
	background: none;
	border: none;
	color: #e8edf2;
	font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
	font-size: 0.85em;
	line-height: 1.4;
	word-break: break-all;
}

/* --- Hinweis auf den nötigen API-Schlüssel --- */
.belbo-api-note {
	margin: 1.2em 0;
	padding: 14px 16px;
	background: #f7f8f2;
	border: 1px solid #e2e0db;
	border-left: 4px solid #9db61d;
	border-radius: 3px;
	font-size: 0.94em;
	line-height: 1.55;
}

/* --- Zwischenüberschriften, gleiche Formensprache wie im Handbuch --- */
.entry-content h2.belbo-api-h2 {
	margin: 2em 0 0.8em;
	padding-left: 14px;
	font-size: 1.2em;
	border-left: 4px solid #9db61d;
}
.entry-content h3.belbo-api-h3 {
	margin: 1.4em 0 0.6em;
	font-size: 1.02em;
	color: #666;
}

.belbo-api-table table {
	margin: 0 0 1.4em;
}
/* Lange Werte (JSON-Zeichenketten, Pfade) müssen in der Zelle umbrechen dürfen - sonst
   schieben sie sich über die Nachbarspalte. */
.belbo-api-table code {
	white-space: normal;
	overflow-wrap: anywhere;
}
.belbo-api-empty {
	color: #aaa;
}

/* --- Code- und Beispielblöcke ---
   Selektor bewusst mit ".entry-content" davor: core style.css setzt
   ".entry-content pre { color:#666; border:1px solid #ededed; font-size:12px; padding:24px }"
   (Spezifität 0-1-1) und hätte sonst dunkelgraue Schrift auf dem dunklen Grund erzwungen -
   ein einfaches ".belbo-api-code" (0-1-0) verliert dagegen. */
.entry-content .belbo-api-code {
	max-height: 420px;
	margin: 0.6em 0 1.4em;
	padding: 14px;
	overflow: auto;
	background: #2d3e50;
	border-radius: 3px;
	color: #e8edf2;
	font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
	font-size: 0.82em;
	line-height: 1.5;
	white-space: pre;
}
.belbo-api-example {
	margin: 0 0 10px;
	border: 1px solid #e2e0db;
	border-radius: 3px;
}
.belbo-api-example > summary {
	padding: 10px 14px;
	background: #f2f0ec;
	cursor: pointer;
	font-size: 0.92em;
	font-weight: 600;
}
.belbo-api-example[open] > summary {
	border-bottom: 1px solid #e2e0db;
}
.entry-content .belbo-api-example .belbo-api-code {
	margin: 0;
	border-radius: 0 0 3px 3px;
}
.belbo-api-status {
	display: inline-block;
	min-width: 34px;
	margin-right: 8px;
	padding: 1px 6px;
	border-radius: 10px;
	color: #fff;
	font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
	font-size: 0.8em;
	text-align: center;
}
.belbo-api-status-ok {
	background: #2f7d3a;
}
.belbo-api-status-err {
	background: #b3453a;
}

.belbo-api-synced {
	margin-top: 2em;
	font-size: 0.82em;
	color: #999;
}

/* --- Übersichtsliste --- */
.belbo-api-list {
	margin: 0 0 1.6em;
	padding: 0;
	list-style: none;
	border: 1px solid #e2e0db;
	border-radius: 3px;
	overflow: hidden;
}
.entry-content .belbo-api-list li {
	margin: 0; /* überschreibt ".entry-content li { margin: 0 0 0 36px }" aus dem Theme */
	list-style: none;
}
.belbo-api-list li + li {
	border-top: 1px solid #e2e0db;
}
.belbo-api-list a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	text-decoration: none;
}
.belbo-api-list li:nth-child(even) a {
	background: #faf9f7;
}
.belbo-api-list a:hover {
	background: #f2f0ec;
}
.belbo-api-list .belbo-api-method {
	min-width: 54px;
	padding: 3px 8px;
	border-radius: 3px;
	text-align: center;
	font-size: 0.72em;
}
.belbo-api-list-name {
	flex: 1 1 auto;
	color: #4d4c4c;
	font-weight: 600;
}
.belbo-api-list-path {
	flex: 0 1 auto;
	color: #888;
	font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
	font-size: 0.8em;
	word-break: break-all;
}

@media (max-width: 600px) {
	.belbo-api-list a {
		flex-wrap: wrap;
	}
	.belbo-api-list-path {
		flex-basis: 100%;
	}
}

/* Titel der Übersichtsseite in derselben Optik wie ein Artikeltitel. Das Theme münzt seine
   Regel auf ".single" bzw. einzelne Taxonomie-Bodyklassen (siehe belbo-custom.css,
   ".tax-belbo_funktion .entry-header .entry-title") - Archivseiten dieses Post-Types sind
   dort naturgemäß nicht enthalten. */
.post-type-archive-belbo_endpoint .entry-header .entry-title,
.tax-belbo_api_bereich .entry-header .entry-title,
.tax-belbo_api_gruppe .entry-header .entry-title,
.tax-belbo_api_methode .entry-header .entry-title {
	font-size: 30px;
	font-size: 2.142857143rem;
	line-height: 1.25;
	font-weight: 700;
	color: #2d3e50;
	padding-bottom: 0.5em;
	border-bottom: 2px solid #e2e0db;
}
@media (max-width: 600px) {
	.post-type-archive-belbo_endpoint .entry-header .entry-title,
	.tax-belbo_api_bereich .entry-header .entry-title,
	.tax-belbo_api_gruppe .entry-header .entry-title,
	.tax-belbo_api_methode .entry-header .entry-title {
		font-size: 24px;
		font-size: 1.714285714rem;
	}
}

/* Zweite Menüebene: die Postman-Gruppe ist selbst ein aufklappbarer .nav-main-Knoten, damit
   nur die Gruppe des gerade geöffneten Endpunkts ausgeklappt ist. Optisch bewusst leiser als
   die Bereichsebene (kleiner, eingerückt, keine eigene Trennlinie oben). */
.side-menu .belbo-api-nav-group > .nav-toggle {
	padding: 7px 14px 7px 22px;
	font-size: 10.5px;
	color: #999;
	border-bottom: none;
}
.side-menu .belbo-api-nav-group.open > .nav-toggle {
	background: none;
	color: #7a8f16;
}
.side-menu .belbo-api-nav-group > .nav-sub {
	background: none;
	padding: 0 0 4px;
}
.side-menu .belbo-api-nav-group > .nav-sub li a {
	padding-left: 30px;
}

/* --- Dritte Spalte: Beispielantworten neben dem Text -----------------------
   Klassische API-Doku-Aufteilung: links das Handbuch-Menü, in der Mitte Beschreibung und
   Parameter, rechts die Beispielantwort. Ab 1100px Fensterbreite zweispaltig, darunter fällt
   das Raster auf eine Spalte zurück (dann steht die Antwort wieder unter dem Text).
   "minmax(0, 1fr)" statt "1fr": ohne die 0-Untergrenze weitet der breite <pre>-Block die
   Spalte auf und schiebt die rechte Spalte aus dem Layout. */
@media (min-width: 1100px) {
	.entry-content.belbo-api-cols {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
		gap: 30px;
		align-items: start;
	}
	.belbo-api-col-side {
		position: sticky;
		top: 20px;
		max-height: calc(100vh - 40px);
		overflow-y: auto;
	}
	/* In der schmaleren Spalte ist die erste Überschrift bündig mit dem Text daneben. */
	.belbo-api-col-side .belbo-api-h2:first-child {
		margin-top: 0;
	}
	.belbo-api-col-side .belbo-api-code {
		max-height: none;
	}
}

/* --- JSON-Baumansicht der Beispielantworten (siehe assets/belbo-api-docs.js) ---------------
   Gleiche Farbwelt wie der Rohblock (dunkles Petrol), damit der Umschalter "Rohtext" keinen
   Bruch erzeugt. Selektoren wieder mit ".entry-content" davor, weil das Theme pre/code/button
   im Artikelbereich eigene Regeln gibt. */
.entry-content .belbo-json {
	margin: 0;
	background: #2d3e50;
	border-radius: 0 0 3px 3px;
	overflow: hidden;
}
.entry-content .belbo-json-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px 10px;
	background: rgba(255, 255, 255, 0.06);
}
.entry-content .belbo-json-btn {
	padding: 3px 9px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 3px;
	color: #d8e0e8;
	font-size: 11px;
	line-height: 1.6;
	cursor: pointer;
}
.entry-content .belbo-json-btn:hover {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}
.entry-content .belbo-json-tree {
	max-height: 460px;
	padding: 12px 14px;
	overflow: auto;
	font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
	font-size: 12px;
	line-height: 1.6;
	color: #e8edf2;
}
.entry-content .belbo-json-children {
	margin-left: 14px;
	padding-left: 8px;
	border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.entry-content .belbo-json-toggle {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	padding: 0;
	background: none;
	border: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.entry-content .belbo-json-toggle:hover .belbo-json-summary {
	color: #cfd8e2;
}
.entry-content .belbo-json-caret {
	display: inline-block;
	width: 10px;
	color: #8fa3b8;
	transition: transform 0.12s ease;
}
.entry-content .belbo-json-node.is-open > .belbo-json-toggle .belbo-json-caret {
	transform: rotate(90deg);
}
/* Bei aufgeklapptem Knoten steht die schließende Klammer weiter unten - die Zusammenfassung
   in der Kopfzeile wäre dann doppelt gemoppelt und wird ausgeblendet. */
.entry-content .belbo-json-node.is-open > .belbo-json-toggle .belbo-json-summary,
.entry-content .belbo-json-node.is-open > .belbo-json-toggle .belbo-json-brace + .belbo-json-summary ~ .belbo-json-brace {
	opacity: 0.45;
}
.entry-content .belbo-json-key {
	color: #9ec5e8;
}
.entry-content .belbo-json-brace {
	color: #8fa3b8;
}
.entry-content .belbo-json-summary {
	color: #7f93a8;
	font-style: italic;
}
.entry-content .belbo-json-string {
	color: #b6cf3a;
}
.entry-content .belbo-json-number {
	color: #f0b45f;
}
.entry-content .belbo-json-boolean {
	color: #6fb3e0;
}
.entry-content .belbo-json-null {
	color: #8fa3b8;
	font-style: italic;
}
.entry-content .belbo-json-node {
	white-space: nowrap;
}
.belbo-api-truncated {
	margin: 0;
	padding: 8px 14px;
	background: #f2f0ec;
	font-size: 0.82em;
	color: #888;
}

/* --- Kennzeichnung von Pflicht-/Optional-Feldern in den Parametertabellen --- */
.belbo-api-req,
.belbo-api-opt {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 10px;
	font-size: 0.82em;
	font-weight: 600;
	white-space: nowrap;
}
.belbo-api-req {
	background: #e4e9cc;
	color: #5a6a0e;
}
.belbo-api-opt {
	background: #eceff1;
	color: #77828c;
}
/* Verschachtelte Felder (z.B. bookingGroups.0) leicht eingerückt, damit die Zugehörigkeit
   ohne zusätzliche Spalte erkennbar bleibt. */
.belbo-api-field-level-1 td:first-child {
	padding-left: 30px;
}
.belbo-api-field-level-1 td:first-child code {
	color: #777;
}
.entry-content .belbo-api-body-raw > summary {
	font-weight: 400;
	color: #666;
}

/* --- Spaltenbreiten der Parameter- und Feldtabellen -------------------------
   Ohne feste Breiten zieht der Browser die Beispielwert-Spalte auf und presst die
   Beschreibung auf wenige Zeichen pro Zeile - in der schmalen Mittelspalte des
   dreispaltigen Layouts besonders auffällig. Selektoren mit beiden Klassen, weil
   belbo-custom.css ".belbo-settings-table th:first-child { width: 16% }" setzt. */
.belbo-api-table table {
	table-layout: fixed;
}
/* box-sizing ist entscheidend: die Zellen des Themes haben 14px Innenabstand links und
   rechts; ohne border-box kommt der zu den Prozentbreiten HINZU, die Summe überschreitet
   100% und der Browser quetscht die letzte Spalte (Beschreibung) auf wenige Zeichen. */
.belbo-api-table td,
.belbo-api-table th {
	box-sizing: border-box;
	padding: 9px 11px;
	word-break: break-word;
}
/* Zwei Spalten je Kopfzeile (Name/Feld + Typ); Beispielwert und Beschreibung stehen in einer
   eigenen Zeile darunter über die volle Breite. */
.belbo-settings-table.belbo-api-table-params th:nth-child(1),
.belbo-settings-table.belbo-api-table-params td:nth-child(1) {
	width: 62%;
}
.belbo-settings-table.belbo-api-table-fields th:nth-child(1),
.belbo-settings-table.belbo-api-table-fields td:nth-child(1) {
	width: 62%;
}


/* --- Kopfzeile: erst Pfad, auf Klick die vollständige URL --------------------
   Der Host ist auf allen Endpunkten identisch und kostet in der schmalen Mittelspalte nur
   Platz; ausgeklappt wird er per Klick (belbo-api-docs.js). */
.belbo-api-url-toggle {
	cursor: pointer;
}
.belbo-api-url-host {
	margin-right: 1px;
	color: #8fa3b8;
}
.belbo-api-url-toggle:hover .belbo-api-url-host,
.belbo-api-url-toggle:focus .belbo-api-url-host {
	color: #b6cf3a;
}
.belbo-api-url-toggle:focus {
	outline: 1px dotted rgba(255, 255, 255, 0.4);
	outline-offset: -2px;
}

/* Zwischenüberschrift je Feldgruppe im Request-Body */
.entry-content h3.belbo-api-h3 {
	margin: 1.6em 0 0.5em;
	font-size: 0.95em;
	font-weight: 700;
	color: #4d4c4c;
	text-transform: none;
}

/* Beschreibung sitzt unter dem Beispielwert in derselben Zelle - leicht eingerückt und mit
   dünner Linie, damit die Zugehörigkeit zum Wert darüber sichtbar bleibt. */
/* Beschreibung unter dem Beispielwert: gleiche Einrückung wie das Label, damit Name (oben) und
   Erläuterung (unten) sich klar als Über- und Unterordnung lesen. Kein zusätzlicher Strich mehr -
   die Einrückung reicht, seit der Beispielwert als Chip erkennbar ist. */
.belbo-api-desc {
	display: block;
	margin: 0;
	padding-left: 84px;
	color: #555;
	font-size: 0.95em;
	line-height: 1.55;
}
/* Die Beschreibungen aus Postman sind HTML-Absätze; das Theme gibt jedem <p> im Artikel einen
   großen Abstand nach unten - mit ".entry-content" davor gewinnt die Regel hier sicher. */
.entry-content .belbo-api-desc p {
	margin: 0;
}
.entry-content .belbo-api-desc p + p {
	margin-top: 0.4em;
}

/* --- Zweizeilige Darstellung je Parameter/Feld --------------------------------
   Zeile 1: Name und Typ. Zeile 2: Beispielwert und Beschreibung über die volle Breite.
   Beide Zeilen gehören optisch zusammen, deshalb keine Trennlinie dazwischen; die Streifen
   des Themes (tr:nth-child(even)) würden das Paar auseinanderreißen und werden ersetzt durch
   ein Alternieren im Vierertakt - also je Paar statt je Zeile. */
/* Keine Zebrastreifen: sie würden das Zeilenpaar (Name-Zeile + Beschreibungszeile) optisch
   auseinanderreißen, und die Trennlinie zwischen den Paaren genügt zur Gliederung. */
.belbo-api-table tbody tr > td {
	background: none;
}
.belbo-api-table .belbo-api-row-head > td {
	padding-bottom: 2px;
	border-bottom: none;
	vertical-align: baseline;
}
.belbo-api-table .belbo-api-row-head > td:last-child {
	color: #888;
	font-size: 0.9em;
	text-align: right;
}
/* Senkrechte Linie zwischen Name und Typ entfernen: die Beschreibungszeile darunter läuft
   ohnehin über beide Spalten, das Paar liest sich sonst wie zwei getrennte Zellen. */
.belbo-api-table .belbo-api-row-head > td:first-child {
	border-right: none;
}
.belbo-api-table .belbo-api-row-head > td:last-child {
	border-left: none;
}
.belbo-api-table .belbo-api-row-body > td {
	padding-top: 0;
	border-top: none;
}
/* Feldname ist die Überschrift des Blocks - deutlich kräftiger als der Beispielwert darunter,
   sonst sehen beide (beides Monospace) gleich aus und man weiß nicht, was was ist. */
.belbo-api-table .belbo-api-row-head > td:first-child code {
	font-weight: 700;
	font-size: 1.02em;
	color: #2d3e50;
}
.belbo-api-table .belbo-api-row-head > td:last-child {
	white-space: nowrap;
}
/* Beispielwert mit vorangestelltem Mini-Label, damit die Zeile selbsterklärend ist. */
.belbo-api-kv {
	display: block;
	margin-bottom: 4px;
}
.belbo-api-label {
	display: inline-block;
	min-width: 84px; /* "PLATZHALTER" ist das längste Label - so bleiben Chip und Beschreibung darunter auf einer Fluchtlinie */
	color: #999;
	font-size: 0.78em;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	vertical-align: 1px;
}
.belbo-api-example-value {
	padding: 1px 7px;
	background: #f2f0ec;
	border: 1px solid #e6e3dd;
	border-radius: 3px;
	color: #555;
}
/* Verschachtelte Felder (z.B. bookingGroups.0) rücken mit ihrer gesamten Beschreibung ein. */
.belbo-api-row-head.belbo-api-field-level-1 > td:first-child,
.belbo-api-row-body.belbo-api-field-level-1 > td {
	padding-left: 34px;
}
/* Kopfzelle der zweiten Spalte folgt der rechtsbündigen Ausrichtung ihrer Werte. */
.belbo-api-table thead th:last-child {
	text-align: right;
}

/* Kopfzeile ohne senkrechte Trennung - unter ihr laufen die Beschreibungszeilen ohnehin über
   die volle Breite. */
.belbo-api-table thead th:first-child {
	border-right: none;
}
.belbo-api-table thead th:last-child {
	border-left: none;
}
/* Postman-Variablen sind Platzhalter, keine Beispielwerte - dezenter gesetzt. */
.belbo-api-example-value.is-placeholder {
	background: none;
	border-style: dashed;
	color: #888;
}

/* Auf schmalen Viewports kostet die Label-Spalte zu viel Breite: Beschreibung rückt dort nur
   leicht ein, das Label bleibt in seiner Zeile. */
@media (max-width: 600px) {
	.belbo-api-label {
		min-width: 0;
		margin-right: 8px;
	}
	.belbo-api-desc {
		padding-left: 0;
	}
}
/* Pflicht-/Optional-Kennzeichnung neben der Übergabeart in der Parametertabelle */
.belbo-api-row-head .belbo-api-req,
.belbo-api-row-head .belbo-api-opt {
	margin-left: 8px;
}