/* PPP KHP — additions for in-page linking + detail sections.
   Kept separate so the 4dd 1:1 design file (khp.css) stays pristine.
   Variables (--brand, --pair, --ink, …) are inherited from khp.css :root. */

/* Bare mode (default embed, no blue hero band): blend into the host page. */
.khp.khp--bare { background: transparent; }
.khp.khp--bare .body { padding-top: 4px; }

/* Wide mode — opt-in via [ppp_khp width="wide"]. Breaks out of the theme's 1200px .container
   so the 6 columns breathe. Negative-margin breakout (NOT transform — the modal overlay is a
   child of .khp and transform would trap its position:fixed). Capped at 1500px, centred on the
   viewport, never wider than 96vw so it can't cause a horizontal scrollbar. */
.khp.khp--wide {
	margin-left: calc(50% - min(750px, 48vw));
	margin-right: calc(50% - min(750px, 48vw));
}
.khp.khp--wide .wrap { max-width: none; }

/* Intro text above the table — readable column width even when the grid runs wide. */
.khp .khp-intro { margin: 2px 0 24px; font-size: 15px; line-height: 1.62; color: var(--ink); }
.khp .khp-intro p { margin: 0 0 .75em; }
.khp .khp-intro p:last-child { margin-bottom: 0; }

/* Link list below the table — "Weitere Beiträge". */
.khp .khp-linklist { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); }
/* Match the site typography: EB Garamond (serif, #1d81ac) headings, Proxima Nova body — no heavy weights. */
.khp .khp-linklist-title {
	font-family: "EB Garamond", Georgia, serif; font-weight: 600; font-size: clamp(21px,2.4vw,28px);
	line-height: 1.2; color: #1d81ac; margin: 0 0 16px;
}
.khp .khp-linklist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 1000px; }
.khp .khp-linklist li { margin: 0; padding-left: 16px; position: relative; }
.khp .khp-linklist li::before { content: "›"; position: absolute; left: 0; top: 0; color: var(--brand); }
.khp .khp-linklist a { color: var(--brand-d); text-decoration: none; font-family: "Proxima Nova", sans-serif; font-weight: 400; font-size: 15px; line-height: 1.5; }
.khp .khp-linklist a:hover { color: var(--brand-dd); text-decoration: underline; }
.khp .khp-linklist .khp-ext { font-size: 11px; color: var(--faint); }

/* Linked chips: clickable, but visually identical to the approved design. */
.khp .dec.lk { cursor: pointer; }
.khp .dec-link { text-decoration: none; color: inherit; }
.khp .dec.lk:hover { border-left-color: var(--brand-d); box-shadow: 0 1px 6px rgba(29,129,172,.16); }

/* Kill the theme's (orange) focus ring on our interactive elements; keep a brand ring for keyboard users only. */
.khp button:focus,
.khp .seg button:focus,
.khp a.dec-link:focus,
.khp .khp-db-link:focus,
.khp-modal-x:focus {
	outline: none !important;
	box-shadow: none !important;
}
.khp button:focus-visible,
.khp .seg button:focus-visible,
.khp a.dec-link:focus-visible,
.khp .khp-db-link:focus-visible,
.khp-modal-x:focus-visible {
	outline: 2px solid var(--brand) !important;
	outline-offset: 2px;
}

/* Detail sections (jump targets for the table). */
.khp .khp-details { margin-top: 34px; }
.khp .khp-details-title {
	font-family: var(--head); font-weight: 800; font-size: clamp(20px,2.4vw,28px);
	color: var(--brand-dd); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--brand);
}
.khp .khp-detail {
	background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--brand);
	border-radius: 6px; padding: 16px 18px 18px; margin-bottom: 14px; scroll-margin-top: 24px;
}
.khp .khp-detail:target { box-shadow: 0 0 0 3px var(--pair-bg); border-left-color: var(--brand-dd); }
.khp .khp-detail-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.khp .khp-detail-h h3 { font: 700 16px/1.3 var(--head); color: var(--ink); margin: 0; }
.khp .khp-az {
	font: 600 11px var(--head); color: var(--soft); background: var(--neu-bg);
	padding: 3px 8px; border-radius: 3px; margin-left: auto;
}
.khp .khp-detail-body { font-size: 13.5px; color: var(--ink); line-height: 1.55; }
.khp .khp-detail-body ul, .khp .khp-detail-body ol { margin: .4em 0 .4em 1.2em; padding: 0; }
.khp .khp-detail-body li { margin: .25em 0; }
.khp .khp-db-link {
	display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
	font: 700 12.5px var(--head); color: #fff; background: var(--brand);
	padding: 8px 14px; border-radius: 4px; text-decoration: none; transition: background .15s;
}
.khp .khp-db-link:hover { background: var(--brand-d); }
.khp .khp-back {
	display: inline-block; margin-top: 12px; margin-left: 12px;
	font: 600 12px var(--head); color: var(--faint); text-decoration: none;
}
.khp .khp-back:hover { color: var(--brand); }

/* Modal mode (JS present): hide the stacked sections, show detail in an overlay. */
.khp.khp-has-modal .khp-details { display: none; }
.khp-modal-overlay {
	position: fixed; inset: 0; z-index: 99999; overflow: auto;
	background: rgba(33, 64, 78, .55);
	display: flex; padding: 24px 16px;            /* child uses margin:auto -> centered, no top-clip on overflow */
}
.khp-modal-overlay[hidden] { display: none; }
.khp-modal {
	position: relative; margin: auto; width: 100%; max-width: 720px;
	background: var(--card); border-radius: 8px; box-shadow: 0 24px 64px rgba(0,0,0,.32);
	animation: khp-modal-in .18s ease both;
}
@keyframes khp-modal-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.khp-modal-x {
	position: absolute; top: 12px; right: 12px; z-index: 2;
	width: 32px; height: 32px; display: grid; place-items: center;
	border: 0; border-radius: 50%; cursor: pointer;
	background: var(--pair-bg); color: var(--brand);
	font: 400 20px/1 var(--head); padding: 0; transition: background .15s, color .15s;
}
.khp-modal-x:hover { background: var(--brand); color: #fff; }
.khp-modal-body .khp-detail {
	border: 0; border-left: 0; margin: 0; padding: 24px 26px; box-shadow: none; border-radius: 8px;
}
.khp-modal-body .khp-detail:target { box-shadow: none; }
.khp-modal-body .khp-detail-h { padding-right: 44px; }   /* keep title/AZ clear of the close button */

@media print {
	.khp .khp-db-link, .khp .khp-back { display: none; }
	.khp .khp-detail { break-inside: avoid; }
	/* print/no-JS: always show the full stacked detail, never the modal */
	.khp.khp-has-modal .khp-details { display: block !important; }
	.khp-modal-overlay { display: none !important; }
}