/* =====================================================================
 * UDM Handout-Styles V2
 * Brand-Primary: #2fa4e7 (UDM-Blau aus den Showcases)
 * KEINE :has()-Selektoren — alles laeuft ueber .h2-active als Marker.
 * ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* === Resets ===
   Body wird zum scroll-Container fuer die ganze Seite.
   overflow-x: clip statt hidden — clip verhindert horizontales Scrollen,
   ohne einen Block-Formatierungs-Kontext zu erzeugen, der position: sticky
   bei .h2-page-header brechen wuerde. */
html.h2-active, body.h2-active { margin: 0; padding: 0; overflow-x: clip; background: #fff; max-width: 100vw; width: 100vw; box-sizing: border-box; }
html.h2-active { height: 100%; }
body.h2-active > h1 { display: none; }
*, *::before, *::after { box-sizing: border-box; }

body.h2-active {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #2d3748;
    line-height: 1.5;
    font-size: 13px;
}

/* CSS-Variablen auf .h2-root */
.h2-root {
    --primary: #2fa4e7;
    --primary-dark: #0369a1;
    --primary-darker: #0c4a6e;
    --primary-light: #e1f0fb;
    --primary-lighter: #f0f8fd;
    --text: #2d3748;
    --text-light: #718096;
    --border: #e2e8f0;
    --user: #16a34a;
    --user-bg: #f0fdf4;
    --admin: #2563eb;
    --admin-bg: #eff6ff;
    --admin-light: #dbeafe;
    --tip: #d97706;
    --tip-bg: #fffbeb;
    --tip-border: #fde68a;
    --user-border: #bbf7d0;
    --admin-border: #bfdbfe;
}

/* === Globaler Text === */
.h2-content p, .h2-content li, .h2-content ul, .h2-content ol, .h2-content td, .h2-content th { font-size: 13px; }

/* === TOC links === */
.h2-toc { position: fixed; left: 0; top: 0; bottom: 0; width: 250px; background: #fafbfc; border-right: 1px solid #e2e8f0; padding: 0.7em 0.5em 1em; overflow-y: auto; z-index: 50; display: flex; flex-direction: column; box-sizing: border-box; }
.h2-toc-back { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.4em 0.6em; margin-bottom: 0.55em; font-size: 11.5px; font-weight: 500; color: #2fa4e7; text-decoration: none; border-radius: 4px; flex-shrink: 0; align-self: flex-start; }
.h2-toc-back:hover { background: #e1f0fb; color: #1d4ed8; }
.h2-toc-brand { font-size: 0.74em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #718096; padding: 0 0.6em; margin-bottom: 0.5em; flex-shrink: 0; }

.h2-toc-search { position: relative; padding: 0 0.4em; margin-bottom: 0.5em; flex-shrink: 0; }
.h2-toc-search input { width: 100%; padding: 5px 26px 5px 9px; border: 1px solid #e2e8f0; border-radius: 5px; background: #fff; font-size: 11.5px; color: #2d3748; font-family: inherit; outline: none; box-sizing: border-box; }
.h2-toc-search input:focus { border-color: #2fa4e7; box-shadow: 0 0 0 2px rgba(47,164,231,0.15); }
.h2-toc-search input::placeholder { color: #cbd5e1; }
.h2-toc-search-clear { position: absolute; right: 0.7em; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 50%; background: #e2e8f0; color: #718096; border: none; cursor: pointer; display: none; align-items: center; justify-content: center; font-size: 10px; padding: 0; }
.h2-toc-search-clear:hover { background: #cbd5e1; color: #fff; }
.h2-toc-search.has-value .h2-toc-search-clear { display: inline-flex; }
.h2-toc-search-icon { position: absolute; right: 0.7em; top: 50%; transform: translateY(-50%); color: #cbd5e1; pointer-events: none; font-size: 11px; }
.h2-toc-search.has-value .h2-toc-search-icon { display: none; }

.h2-toc-body { flex: 1; overflow-y: auto; min-height: 0; }
.h2-toc details { margin: 0; }
.h2-toc details > summary { display: flex; align-items: center; gap: 0.4em; padding: 0.42em 0.5em; cursor: pointer; list-style: none; border-radius: 4px; font-size: 11.5px; font-weight: 600; color: #2d3748; user-select: none; }
.h2-toc details > summary:hover { background: #e1f0fb; color: #2fa4e7; }
.h2-toc details > summary::-webkit-details-marker { display: none; }
.h2-toc details > summary::before { content: "▸"; font-size: 9px; color: #718096; transition: transform 0.15s; flex-shrink: 0; width: 10px; text-align: center; }
.h2-toc details[open] > summary::before { transform: rotate(90deg); }

.h2-toc-group { font-size: 0.66em !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #718096 !important; padding: 0.7em 0.5em 0.25em !important; }
.h2-toc-group::before { display: none !important; }
.h2-toc-group:hover { background: none !important; color: #718096 !important; }

.h2-toc-list { list-style: none; padding: 0; margin: 0; }
.h2-toc-list li { margin: 0; }
.h2-toc-list a { display: block; padding: 0.32em 0.6em 0.32em 1.5em; border-radius: 4px; color: #2d3748; text-decoration: none; line-height: 1.35; font-size: 11.5px; }
.h2-toc-list a:hover { background: #e1f0fb; color: #2fa4e7; }
.h2-toc-list a.active { background: #e1f0fb; color: #2fa4e7; font-weight: 600; }

.h2-toc-chapters { list-style: none; padding: 0.2em 0 0.4em 1.7em; margin: 0; border-left: 2px solid #e1f0fb; margin-left: 1em; }
.h2-toc-chapters a { display: flex; align-items: center; gap: 0.45em; padding: 0.28em 0.5em; border-radius: 4px; color: #2d3748; text-decoration: none; font-size: 11px; line-height: 1.3; }
.h2-toc-chapters a:hover { background: #e1f0fb; color: #2fa4e7; }
.h2-toc-chapters a.active { background: #e1f0fb; color: #2fa4e7; font-weight: 600; }
.h2-toc-chapters .h2-toc-num { display: inline-flex; align-items: center; justify-content: center; min-width: 1.3em; height: 1.3em; padding: 0 0.25em; background: #e2e8f0; color: #718096; border-radius: 3px; font-size: 0.85em; font-weight: 600; flex-shrink: 0; }
.h2-toc-chapters a.active .h2-toc-num { background: #2fa4e7; color: #fff; }

/* === Content ===
   .h2-root spannt Body-Breite. .h2-content sitzt im Inneren mit padding-left
   anstelle von margin-left. Damit kann nichts vom Layout aus dem Viewport
   herausragen. */
.h2-root { width: 100%; max-width: 100vw; overflow-x: clip; box-sizing: border-box; padding-left: 250px; }
.h2-content { width: 100%; min-width: 0; overflow-x: clip; box-sizing: border-box; }
/* padding-bottom: 4.5em macht Platz fuer den fixed Seiten-Footer am unteren Rand. */
.h2-content-body { overflow-x: clip; padding: 0 1.6em 4.5em; max-width: 100%; box-sizing: border-box; }

.h2-page-header { position: sticky; top: 0; z-index: 40; padding: 0.85em 1.6em 0.7em; background: linear-gradient(135deg, #0369a1 0%, #0c4a6e 100%); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 1.2em; }
.h2-page-title { font-size: 1.45em; font-weight: 700; color: #fff; margin: 0 0 0.1em; line-height: 1.2; }
.h2-page-subtitle { font-size: 0.9em; color: rgba(255,255,255,0.85); margin: 0; }

/* === Page-Status-Badge (Pill rechts oben im Header) ===
   preview = orange (laeuft, aber nicht final)
   geplant = grau (Konzept, noch nicht implementiert)
   beta    = lila (in Erprobung, instabil)
   Leer/kein Badge = produktiv. */
.h2-page-status { position: absolute; top: 0.85em; right: 1.6em; padding: 0.18em 0.7em; border-radius: 999px; color: #fff; font-size: 0.68em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.4; box-shadow: 0 1px 3px rgba(0,0,0,0.18); }
.h2-page-status.preview { background: #d97706; }
.h2-page-status.geplant { background: #6b7280; }
.h2-page-status.beta { background: #7c3aed; }

/* === Sections === */
.h2-section { margin-bottom: 2.2em; }
.h2-section-header { display: flex; align-items: center; gap: 0.7em; padding: 0.75em 1em; margin: 0 0 0.9em; background: linear-gradient(135deg, #e1f0fb, #f0f8fd); border-radius: 8px; border-left: 5px solid #2fa4e7; }
.h2-section-num { width: 1.85em; height: 1.85em; border-radius: 5px; background: #2fa4e7; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1em; flex-shrink: 0; }
.h2-section-title { font-size: 1.32em; font-weight: 600; color: #2fa4e7; margin: 0; line-height: 1.2; padding: 0; border: 0; background: none; }

.h2-section-header.user { background: linear-gradient(135deg, #f0fdf4, #fafffa); border-left-color: #16a34a; }
.h2-section-header.user .h2-section-num { background: #16a34a; }
.h2-section-header.user .h2-section-title { color: #16a34a; }

.h2-section-header.admin { background: linear-gradient(135deg, #eff6ff, #fafbff); border-left-color: #2563eb; }
.h2-section-header.admin .h2-section-num { background: #2563eb; }
.h2-section-header.admin .h2-section-title { color: #2563eb; }

.h2-section-header.tip { background: linear-gradient(135deg, #fffbeb, #fffaef); border-left-color: #d97706; }
.h2-section-header.tip .h2-section-num { background: #d97706; }
.h2-section-header.tip .h2-section-title { color: #d97706; }

.h2-section-intro { color: #718096; font-size: 13px; margin: 0 0 0.7em; }

/* === Feature/Role-Boxen (Legacy/Backward) === */
.h2-feature { background: #fff; border: 1px solid #e2e8f0; border-radius: 9px; padding: 0.85em 1.1em; margin: 0.7em 0; }
.h2-role { padding: 0.7em 0.9em; border-radius: 7px; margin: 0.5em 0; font-size: 13px; }
.h2-role.user { background: #f0fdf4; }
.h2-role.admin { background: #eff6ff; }
.h2-role-head { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.4em; }
.h2-role-icon { width: 20px; height: 20px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; flex-shrink: 0; }
.h2-role.user .h2-role-icon { background: #16a34a; }
.h2-role.admin .h2-role-icon { background: #2563eb; }
.h2-role-label { font-size: 0.78em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.h2-role.user .h2-role-label { color: #16a34a; }
.h2-role.admin .h2-role-label { color: #2563eb; }
.h2-role-title { font-size: 0.92em; font-weight: 600; color: #2d3748; margin-left: auto; }
.h2-role p { margin: 0 0 0.4em; }
.h2-role p:last-child { margin-bottom: 0; }
.h2-role ul { margin: 0.25em 0 0.45em; padding-left: 1.1em; }
.h2-role li { padding: 0.08em 0; }

.h2-roles-two { display: grid; grid-template-columns: 1fr; gap: 0.7em; }
@media (min-width: 1280px) { .h2-roles-two { grid-template-columns: 1fr 1fr; } }

/* === Mockups === */
[class$="-mock"], .mock { overflow: hidden; max-width: 100%; box-sizing: border-box; }
.mock { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; border: 1px solid #bcc4ce; border-radius: 6px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); margin: 0.7em 0 0; background: #fff; font-size: 12px; color: #334155; }
.mock-cap { background: #f1f5f9; border-bottom: 1px solid #e2e8f0; padding: 4px 8px; font-size: 10.5px; color: #64748b; font-style: italic; }

.h2-callout { background: linear-gradient(135deg, #fef3c7, #fffbeb); border: 1px solid #fde68a; border-radius: 7px; padding: 0.7em 1em; margin: 0.6em 0; color: #78350f; font-size: 0.96em; }
.h2-callout strong { color: #92400e; }

.h2-footer { margin-top: 1.5em; padding-top: 0.8em; border-top: 1px solid #e2e8f0; color: #718096; font-size: 11.5px; font-style: italic; }

/* === Globaler Seiten-Footer (vom Generator gerendert) ===
   position: fixed haelt den Footer permanent am unteren Bildschirmrand.
   left: 250px laesst die Sidebar frei. z-index unter dem Page-Header (40),
   aber ueber dem Inhalt. .h2-content-body bekommt extra padding-bottom,
   damit kein Inhalt hinter dem Footer abgeschnitten wird. */
.h2-page-footer { position: fixed; left: 250px; right: 0; bottom: 0; z-index: 35; padding: 0.7em 1.6em; background: rgba(250,251,252,0.96); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-top: 1px solid #e2e8f0; color: #718096; font-size: 11.5px; display: flex; flex-wrap: wrap; gap: 0.3em 1.4em; align-items: center; box-sizing: border-box; }
.h2-page-footer .h2-pf-sep { color: #cbd5e1; }
.h2-page-footer .h2-pf-link { color: #2fa4e7; text-decoration: none; margin-left: auto; font-weight: 500; }
.h2-page-footer .h2-pf-link:hover { text-decoration: underline; color: #0369a1; }

/* === Mobile === */
@media (max-width: 980px) {
    .h2-toc { position: relative; width: 100%; height: auto; bottom: auto; }
    .h2-content { margin-left: 0; }
    .h2-page-footer { left: 0; }
}