/* =========================================
   Huuswart Referenzen – Modal & Anriss v2.3.1
   Ergänzung zu style.css v2.0. Überschreibt gezielt,
   Farben und Schrift sind aus style.css übernommen.
   ========================================= */

/* ---- Karte: Höhe wird nicht mehr vom Text bestimmt ---- */
/* style.css gibt .hr-text ein flex:1. Bei gekürzten Karten
   soll stattdessen der Button den Restplatz aufnehmen,
   damit .hr-author unten bleibt und die 22px Abstand behält. */

.hr-card--truncated .hr-text {
    flex: 0 1 auto;
}

/* ---- Autorenblock: Trennlinie auf gleicher Höhe -----------------
   Nicht jede Referenz hat Name und Position. Der Block sitzt am
   Kartenboden, also wandert die Linie mit der Zeilenzahl nach oben
   oder unten. Hier wird der Platz für alle drei Zeilen reserviert.
   Die Werte stammen aus style.css: .hr-name 15px/1.4,
   .hr-position und .hr-firma je 13px/1.4, gap 3px.
   justify-content schiebt den Inhalt an das untere Ende, damit die
   Firmennamen aller Karten auf derselben Grundlinie sitzen.
   Umbrechende Firmennamen gleicht zusätzlich modal.js aus. */

.hr-card .hr-author {
    box-sizing: border-box;
    --hr-author-lines: calc(15px * 1.4 + 13px * 1.4 + 13px * 1.4 + 6px);
    min-height: calc(var(--hr-author-lines) + 18px + 1px);
    justify-content: flex-end;
}

/* ---- Nur für Screenreader ---- */
/* Unterscheidet die sonst identischen "Ganze Referenz lesen"-Buttons. */

.hr-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---- "Ganze Referenz lesen" ---- */

.hr-more {
    align-self: flex-start;
    margin: 6px 0 auto;
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid currentColor;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    color: #0d2251;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}

.hr-more:hover {
    color: #4a5a80;
}

.hr-more:focus-visible {
    outline: 2px solid #0d2251;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---- Modal-Grundgerüst ---- */

.hr-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Manrope', sans-serif;
}

.hr-modal[hidden] {
    display: none;
}

.hr-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(13, 34, 81, .78);
    animation: hr-fade .18s ease-out;
}

.hr-modal-box {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: min(85vh, 720px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    padding: 48px 40px 32px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(13, 34, 81, .35);
    animation: hr-pop .2s ease-out;
}

.hr-modal-box:focus {
    outline: none;
}

/* ---- Schliessen-Button ---- */

.hr-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: #f2f5fa;
    border: 0;
    border-radius: 50%;
    color: #0d2251;
    cursor: pointer;
    transition: background .2s ease;
}

.hr-modal-close:hover {
    background: #e8ecf4;
}

.hr-modal-close:focus-visible {
    outline: 2px solid #0d2251;
    outline-offset: 2px;
}

/* ---- Inhalt ---- */
/* .hr-stars wird bereits von style.css gestylt und passt hier unverändert. */

.hr-modal-text {
    margin: 0 0 28px;
    font-size: 16px;
    line-height: 1.75;
    color: #3a4560;
}

.hr-modal-author {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 18px;
    border-top: 1px solid #eef0f8;
}

/* style.css setzt auf .hr-name/.hr-position/.hr-firma ein
   display:block !important. Leere Felder werden vom PHP zwar gar
   nicht mehr ausgegeben – die Regel bleibt als Netz für den Fall,
   dass der Autorenblock je aus einer anderen Quelle kommt. */
.hr-modal-author .hr-name:empty,
.hr-modal-author .hr-position:empty,
.hr-modal-author .hr-firma:empty {
    display: none !important;
}

/* ---- Scroll-Sperre im Hintergrund ---- */
/* --hr-scrollbar setzt modal.js beim Öffnen auf die gemessene
   Scrollbar-Breite, damit die Seite nicht seitlich springt. */

body.hr-modal-open {
    overflow: hidden;
    padding-right: var(--hr-scrollbar, 0px);
}

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

@media (max-width: 640px) {
    .hr-modal {
        padding: 16px;
    }

    .hr-modal-box {
        padding: 48px 24px 28px;
        max-height: 88vh;
    }

    .hr-modal-text {
        font-size: 15px;
        line-height: 1.7;
    }
}

/* ---- Motion ---- */

@keyframes hr-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes hr-pop {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hr-modal-backdrop,
    .hr-modal-box {
        animation: none;
    }
}