/* ═══════════════════════════════════════════════════════════════
   HRK Good-Practice Detail — Stylesheet
   Scoped under .hrk-detail-page, prefixed hrk- / --hrk-
   Colors follow DESIGN.md (KI-Lila, Nunito Sans)
═══════════════════════════════════════════════════════════════ */

/* ─── Design tokens ─────────────────────────────────────────── */
.hrk-detail-page {
    --hrk-ki-lila:      #7300FF;
    --hrk-ki-blau:      #4230F2;
    --hrk-gradient-end: #281064;
    --hrk-sunset-pink:  #FF6D7F;
    --hrk-sec-green:    #6DFFB6;

    --hrk-accent:       var(--hrk-ki-lila);
    --hrk-accent-light: rgba(115, 0, 255, 0.10);
    --hrk-accent-bg:    rgba(115, 0, 255, 0.05);
    --hrk-gradient:     linear-gradient(135deg, var(--hrk-ki-lila), var(--hrk-gradient-end));
    --hrk-lila-tint:    #EBEAFB;
    --hrk-pink-tint:    #FFE7EA;

    --hrk-text-primary:   #1E0D36;
    --hrk-text-body:      #201B26;
    --hrk-text-secondary: #555555;
    --hrk-text-tertiary:  #6b6b6b;

    --hrk-border:     #e0e0e0;
    --hrk-bg-page:    #f7f7f7;
    --hrk-bg-card:    #ffffff;
    --hrk-hover:      #f2f2f2;

    --hrk-radius-card: 12px;
    --hrk-radius-btn:  6px;
    --hrk-radius-tag:  4px;
    --hrk-radius-pill: 50px;

    --hrk-shadow-card:  0 10px 20px rgba(41, 51, 61, 0.1);
    --hrk-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12);

    --hrk-risk-low:   #2d6a4f;
    --hrk-risk-low-bg:#e8f5e9;
    --hrk-risk-mid:   #e07a00;
    --hrk-risk-mid-bg:#fff3e0;
    --hrk-risk-high:  #c0392b;
    --hrk-risk-high-bg:#ffebee;

    font-family: 'Nunito Sans', sans-serif;
    background: var(--hrk-bg-page);
    color: var(--hrk-text-primary);
    line-height: 1.5;
    /* Unbroken tokens (URLs, Testeingaben) müssen überall umbrechen
       dürfen — 'anywhere' zählt anders als 'break-word' auch in die
       min-content-Breite von Grid-/Flex-Zellen hinein. */
    overflow-wrap: anywhere;
}

.hrk-detail-page *,
.hrk-detail-page *::before,
.hrk-detail-page *::after {
    box-sizing: border-box;
}

/* ─── Accessibility ─────────────────────────────────────────── */
.hrk-sr-only {
    position: absolute;
    top: 0; left: 0;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ─── Topbar ────────────────────────────────────────────────── */
.hrk-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 48px;
    background: var(--hrk-gradient);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 20;
}

.hrk-topbar-back {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Nunito Sans', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--hrk-radius-pill);
    transition: background 0.15s;
}

.hrk-topbar-back:hover,
.hrk-topbar-back:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    text-decoration: none;
}

.hrk-topbar-back:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ─── Layout ────────────────────────────────────────────────── */
.hrk-detail-layout {
    display: flex;
    justify-content: space-between;
    padding: 40px 48px;
    gap: 64px;
}

.hrk-detail-main {
    flex: 1;
    max-width: 740px;
    min-width: 0;
}

.hrk-detail-sidebar {
    width: 300px;
    min-width: 300px;
    flex-shrink: 0;
    position: sticky;
    top: 85px;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ─── Header ────────────────────────────────────────────────── */
.hrk-detail-header {
    margin-bottom: 40px;
}

.hrk-detail-scenario {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--hrk-accent);
    background: var(--hrk-accent-light);
    border-radius: var(--hrk-radius-tag);
    margin-bottom: 12px;
}

.hrk-detail-header h1 {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--hrk-text-primary);
    margin: 0 0 12px;
}

.hrk-detail-description {
    font-size: 16px;
    line-height: 1.6;
    color: var(--hrk-text-secondary);
    margin: 0;
}

/* ─── Section ───────────────────────────────────────────────── */
.hrk-section {
    margin-bottom: 40px;
}

.hrk-section-title {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--hrk-accent);
    margin: 0 0 20px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--hrk-accent);
}

.hrk-body {
    font-size: 16px;
    line-height: 1.65;
    color: var(--hrk-text-primary);
    margin: 0 0 16px;
}

.hrk-body:last-child {
    margin-bottom: 0;
}

/* ─── Rich text (paragraphs + bullet/numbered lists) ─────────── */
/* Long free-text fields render as block content: paragraphs from blank
   lines, real <ul>/<ol> from "- " / "1. " lines, or newsroom editor HTML. */
.hrk-body > p,
.hrk-dl-text > p,
.hrk-detail-description > p {
    margin: 0 0 12px;
}

.hrk-body > p:last-child,
.hrk-dl-text > p:last-child,
.hrk-detail-description > p:last-child {
    margin-bottom: 0;
}

.hrk-body ul,
.hrk-body ol,
.hrk-dl-text ul,
.hrk-dl-text ol,
.hrk-detail-description ul,
.hrk-detail-description ol {
    margin: 0 0 12px;
    padding-left: 1.4em;
}

.hrk-body li,
.hrk-dl-text li,
.hrk-detail-description li {
    margin-bottom: 4px;
}

.hrk-body li:last-child,
.hrk-dl-text li:last-child,
.hrk-detail-description li:last-child {
    margin-bottom: 0;
}

.hrk-body ul,
.hrk-dl-text ul,
.hrk-detail-description ul {
    list-style: disc;
}

.hrk-body ol,
.hrk-dl-text ol,
.hrk-detail-description ol {
    list-style: decimal;
}

/* ─── DL grid / cards ───────────────────────────────────────── */
.hrk-dl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.hrk-dl-grid + .hrk-dl-label {
    margin-top: 20px;
}

.hrk-dl-card {
    background: var(--hrk-bg-card);
    border: 1px solid var(--hrk-border);
    border-radius: var(--hrk-radius-card);
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.hrk-dl-flat {
    padding: 0;
}

.hrk-dl-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--hrk-text-tertiary);
    margin-bottom: 8px;
}

.hrk-dl-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--hrk-text-primary);
    line-height: 1.5;
}

.hrk-dl-text {
    font-size: 15px;
    color: var(--hrk-text-primary);
    line-height: 1.55;
    margin: 6px 0 0;
}

.hrk-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hrk-detail-page .hrk-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 500;
    background: var(--hrk-bg-card);
    border: 1px solid var(--hrk-border);
    color: var(--hrk-text-primary);
    border-radius: var(--hrk-radius-tag);
    white-space: nowrap;
}

/* ─── Resource cards (Aufwand) ──────────────────────────────── */
.hrk-resource-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.hrk-resource-card {
    background: var(--hrk-bg-card);
    border: 1px solid var(--hrk-border);
    border-radius: var(--hrk-radius-card);
    padding: 16px;
}

.hrk-resource-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.hrk-resource-type {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--hrk-text-tertiary);
}

.hrk-resource-phase {
    font-size: 11px;
    font-weight: 500;
    color: var(--hrk-text-tertiary);
    background: var(--hrk-bg-page);
    padding: 2px 8px;
    border-radius: var(--hrk-radius-tag);
}

.hrk-resource-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--hrk-text-primary);
    margin: 0 0 8px;
}

/* Segment bar */
.hrk-bar {
    display: flex;
    gap: 3px;
}

.hrk-bar-seg {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--hrk-bg-page);
}

.hrk-bar-seg.is-low  { background: var(--hrk-risk-low); }
.hrk-bar-seg.is-mid  { background: var(--hrk-risk-mid); }
.hrk-bar-seg.is-high { background: var(--hrk-risk-high); }
/* Ressourcenaufwand: wertfrei — alle Balken einheitlich KI Sunset Pink,
   unabhängig von der Anzahl gefüllter Segmente. */
.hrk-bar-seg.is-sunset { background: var(--hrk-sunset-pink); }

/* ─── Body fields (labeled paragraphs) ──────────────────────── */
.hrk-body-field {
    margin-bottom: 20px;
}

.hrk-body-field:last-child {
    margin-bottom: 0;
}

.hrk-body-field-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--hrk-text-tertiary);
    margin-bottom: 6px;
}

/* ─── Collapsible text ("Mehr anzeigen") ────────────────────── */
/* Base state (no JS / not overflowing): full text, no clamp — clamp is only
   applied by detail.js after it measures a real overflow past 5 lines. */
.hrk-collapsible-text--clamped {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hrk-collapsible-toggle {
    display: inline-block;
    margin-top: 6px;
    padding: 0;
    background: none;
    border: 0;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--hrk-accent);
    cursor: pointer;
}

.hrk-collapsible-toggle:hover,
.hrk-collapsible-toggle:focus-visible {
    text-decoration: underline;
}

.hrk-collapsible-toggle:focus-visible {
    outline: 2px solid var(--hrk-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ─── Badge (Ethikprüfung Ja/Nein) ──────────────────────────── */
.hrk-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: var(--hrk-radius-tag);
}

.hrk-badge.is-yes {
    background: var(--hrk-risk-low-bg);
    color: var(--hrk-risk-low);
}

.hrk-badge.is-no {
    background: var(--hrk-risk-high-bg);
    color: var(--hrk-risk-high);
}

.hrk-badge.is-na {
    background: var(--hrk-bg-page);
    color: #5a5a5a;
}

/* ─── Sidebar cards ─────────────────────────────────────────── */
.hrk-sidebar-card {
    background: var(--hrk-bg-card);
    border-radius: var(--hrk-radius-card);
    box-shadow: var(--hrk-shadow-card);
    padding: 24px;
}

.hrk-sidebar-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--hrk-text-tertiary);
    margin-bottom: 12px;
}

.hrk-sidebar-card .hrk-sidebar-label + .hrk-sidebar-label {
    margin-top: 20px;
}

.hrk-sidebar-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
}

.hrk-sidebar-row:last-child {
    margin-bottom: 0;
}

.hrk-sidebar-row-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--hrk-text-tertiary);
}

.hrk-sidebar-row-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--hrk-text-primary);
}

.hrk-divider {
    height: 1px;
    background: var(--hrk-border);
    margin: 16px 0;
    border: 0;
}

/* Contact block — used by Ansprechperson (.hrk-contact) */
.hrk-contact {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hrk-contact-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--hrk-text-primary);
}

.hrk-contact-role {
    font-size: 13px;
    color: var(--hrk-text-secondary);
}

.hrk-contact-email {
    font-size: 13px;
    color: var(--hrk-accent);
    text-decoration: none;
    word-break: break-all;
}

.hrk-contact-email:hover,
.hrk-contact-email:focus-visible {
    color: var(--hrk-accent);
    text-decoration: underline;
}

/* Doc link */
.hrk-doc-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--hrk-bg-page);
    border-radius: var(--hrk-radius-card);
    font-size: 13px;
    font-weight: 600;
    color: var(--hrk-text-primary);
    text-decoration: none;
    transition: background 0.15s;
    margin-bottom: 8px;
}

.hrk-doc-link:last-child {
    margin-bottom: 0;
}

.hrk-doc-link:hover,
.hrk-doc-link:focus-visible {
    background: var(--hrk-hover);
    color: var(--hrk-text-primary);
    text-decoration: none;
}

.hrk-doc-link:focus-visible {
    outline: 2px solid var(--hrk-accent);
    outline-offset: 2px;
}

.hrk-doc-link svg {
    flex-shrink: 0;
    color: var(--hrk-text-secondary);
}

.hrk-doc-link-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hrk-meta-info {
    font-size: 12px;
    color: var(--hrk-text-tertiary);
    line-height: 1.8;
    text-align: center;
}

/* ─── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hrk-detail-page *,
    .hrk-detail-page *::before,
    .hrk-detail-page *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

/* ─── Tablet (≤1199px): stack sidebar, keep dl-grid / resource grid 2-col ── */
@media (max-width: 1199px) {
    /* Break out of theme content wrapper to span full viewport width */
    .hrk-detail-page {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        overflow-x: clip;
    }

    .hrk-topbar {
        padding: 10px 24px;
    }

    .hrk-detail-layout {
        flex-direction: column;
        padding: 32px 24px;
        gap: 24px;
    }

    .hrk-detail-main {
        max-width: 100%;
    }

    .hrk-detail-sidebar {
        width: 100%;
        min-width: 0;
        position: static;
    }
}

/* ─── Mobile (≤767px): single-column grids, tighter padding ───────────── */
@media (max-width: 767px) {
    .hrk-topbar {
        padding: 10px 16px;
        gap: 12px;
    }

    .hrk-detail-layout {
        padding: 20px 16px 24px;
    }

    .hrk-detail-header { margin-bottom: 28px; }
    .hrk-detail-header h1 { font-size: 22px; }
    .hrk-detail-description { font-size: 15px; }

    .hrk-section { margin-bottom: 28px; }

    .hrk-dl-grid { grid-template-columns: 1fr; }
    .hrk-resource-cards { grid-template-columns: 1fr; }

    .hrk-sidebar-card { padding: 18px; }
}

/* ─── Narrow mobile (≤380px): minimal padding, smaller heading ────────── */
@media (max-width: 380px) {
    .hrk-detail-header h1 { font-size: 20px; }
    .hrk-detail-layout { padding: 16px 12px 20px; }
    .hrk-topbar { padding: 10px 12px; }
}