/**
 * SFB-TRR 384 — Projektnetzwerk-Diagramm
 * Alle Selektoren sind in .sfb-diagramm gescoped, um nicht mit Elementor- oder
 * Theme-Styles zu kollidieren.
 */

.sfb-diagramm,
.sfb-diagramm * { box-sizing: border-box; }

.sfb-diagramm #canvas {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.sfb-diagramm #canvas svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

/* === Kreise === */

.sfb-diagramm g.circle-tooltip {
    cursor: pointer;
}

.sfb-diagramm g.circle-tooltip text {
    cursor: pointer;
    user-select: none;
    pointer-events: none;
}

.sfb-diagramm g.circle-tooltip > circle {
    stroke: transparent;
    stroke-width: 0;
    transition: stroke .15s ease, stroke-width .15s ease;
}

.sfb-diagramm g.circle-tooltip:hover > circle,
.sfb-diagramm g.circle-tooltip:focus-visible > circle {
    stroke: rgba(255, 255, 255, .65);
    stroke-width: 3;
    outline: none;
}

.sfb-diagramm g.circle-tooltip:focus-visible > circle {
    stroke: #F66C40;
    stroke-width: 4;
}

.sfb-diagramm g.circle-tooltip.is-selected > circle {
    stroke: #F66C40;
    stroke-width: 4;
    animation: sfb-pulse 2.2s ease-in-out infinite;
}

.sfb-diagramm g.circle-tooltip.is-auto-focus > circle {
    stroke: #ffffff;
    animation: sfb-auto-pulse 1.4s ease-in-out infinite;
}

/* === Backdrop (nur Bottom-Sheet / Mobile) === */

.sfb-diagramm #tooltip-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(13, 34, 54, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: sfb-fade .18s ease-out;
}

.sfb-diagramm #tooltip-backdrop[hidden] { display: none; }

/* === Tooltip — Default Layout (Bottom-Sheet / Mobile + Tablet) === */

/* !important überschreibt eventuelle Inline-Styles aus älterem Diagramm-JS */
.sfb-diagramm #tooltip {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    z-index: 1001;
    width: 100% !important;
    max-width: none;
    max-height: 85vh;
    background: transparent;
    animation: sfb-slide-up .25s cubic-bezier(.2, .9, .3, 1);
}

.sfb-diagramm #tooltip[hidden] { display: none; }

.sfb-diagramm #tooltip .content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0));
    max-height: 85vh;
    overflow-y: auto;
    background: #0D2236;
    color: #EDEDE8;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, .35);
    outline: none;
}

/* Drag-Handle (nur Bottom-Sheet) */
.sfb-diagramm #tooltip .content::before {
    content: "";
    position: absolute;
    top: .6rem;
    left: 50%;
    width: 40px;
    height: 4px;
    background: rgba(237, 237, 232, .25);
    border-radius: 2px;
    transform: translateX(-50%);
}

/* === Tooltip-Inhalt === */

.sfb-diagramm #tooltip .project-name {
    margin: 0;
    padding-right: 3rem; /* Platz für Close-Button */
    font-size: 1.375rem;
    font-weight: bold;
    line-height: 1.1;
    letter-spacing: .02em;
    color: #EDEDE8;
}

.sfb-diagramm #tooltip .description {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.45;
}

/* Verbundene Projekte */

.sfb-diagramm .connections-label {
    margin-bottom: .5rem;
    font-size: .6875rem;
    font-weight: bold;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .55;
}

.sfb-diagramm .connections-list {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.sfb-diagramm .connection-chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;          /* WCAG-Touch-Ziel ≥ 24×24, hier 32 für Komfort */
    padding: 0 .75rem;
    font: bold .75rem/1 Arial, Helvetica, sans-serif;
    color: #fff;
    background: #444;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}

.sfb-diagramm .connection-chip:hover,
.sfb-diagramm .connection-chip:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
    outline: none;
}

.sfb-diagramm .connection-chip:focus-visible {
    box-shadow: 0 0 0 2px #F66C40, 0 4px 10px rgba(0, 0, 0, .3);
}

/* Fußzeile mit PI + Project-Link */

.sfb-diagramm #tooltip .row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: .5rem;
    font-size: .8125rem;
    line-height: 1.3;
    border-top: 1px solid rgba(237, 237, 232, .12);
}

.sfb-diagramm #tooltip .investigators-line {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: .75rem;
}

.sfb-diagramm #tooltip .link {
    flex: 0 0 auto;
    padding-top: .75rem;
    color: #F66C40;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}

.sfb-diagramm #tooltip .link::after {
    content: " →";
    display: inline-block;
    transition: transform .15s ease;
}

.sfb-diagramm #tooltip .link:hover::after,
.sfb-diagramm #tooltip .link:focus-visible::after {
    transform: translateX(3px);
}

.sfb-diagramm #tooltip .link:focus-visible {
    outline: 2px solid #F66C40;
    outline-offset: 3px;
    border-radius: 2px;
}

/* Close-Button */

.sfb-diagramm .tooltip-close {
    position: absolute;
    top: .35rem;
    right: .35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: #EDEDE8;
    cursor: pointer;
    transition: background-color .15s ease;
}

.sfb-diagramm .tooltip-close svg {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
}

.sfb-diagramm .tooltip-close:hover,
.sfb-diagramm .tooltip-close:focus-visible {
    background: rgba(255, 255, 255, .12);
    outline: none;
}

.sfb-diagramm .tooltip-close:focus-visible {
    box-shadow: 0 0 0 2px #F66C40;
}

/* Body-Scroll-Lock nur wenn modal (Bottom-Sheet aktiv) */
body.tooltip-open { overflow: hidden; }

/* === Desktop ≥ 1024px: Panel sitzt im leeren Diagramm-Zentrum === */

@media (min-width: 1024px) {
    .sfb-diagramm #tooltip {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: clamp(260px, 45%, 320px) !important;
        max-width: none;
        max-height: 70%;
        animation: sfb-center-in .22s cubic-bezier(.2, .9, .3, 1.1);
    }

    .sfb-diagramm #tooltip .content {
        max-height: 100%;
        padding: 1.25rem;
        border-radius: 10px;
        box-shadow: 0 12px 36px rgba(0, 0, 0, .35);
    }

    .sfb-diagramm #tooltip .content::before { display: none; }

    .sfb-diagramm .tooltip-close {
        top: .35rem;
        right: .35rem;
        width: 2.25rem;
        height: 2.25rem;
    }

    /* Auf Desktop nicht-blockierend → kein Backdrop, kein Body-Scroll-Lock */
    .sfb-diagramm #tooltip-backdrop { display: none !important; }
    body.tooltip-open { overflow: auto; }
}

/* === Animationen === */

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

@keyframes sfb-center-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.94); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes sfb-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes sfb-pulse {
    0%, 100% { stroke-width: 4; stroke-opacity: 1; }
    50%      { stroke-width: 7; stroke-opacity: .55; }
}

@keyframes sfb-auto-pulse {
    0%, 100% { stroke-width: 2; stroke-opacity: .35; }
    50%      { stroke-width: 5; stroke-opacity: .95; }
}

@keyframes sfb-chip-in {
    from { opacity: 0; transform: translateX(6px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes sfb-breathe {
    0%, 100% { opacity: .6; }
    50%      { opacity: .9; }
}

/* Chip-Cascade */
.sfb-diagramm .connection-chip {
    animation: sfb-chip-in .22s ease-out both;
}
.sfb-diagramm .connection-chip:nth-child(1)  { animation-delay:   0ms; }
.sfb-diagramm .connection-chip:nth-child(2)  { animation-delay:  25ms; }
.sfb-diagramm .connection-chip:nth-child(3)  { animation-delay:  50ms; }
.sfb-diagramm .connection-chip:nth-child(4)  { animation-delay:  75ms; }
.sfb-diagramm .connection-chip:nth-child(5)  { animation-delay: 100ms; }
.sfb-diagramm .connection-chip:nth-child(6)  { animation-delay: 125ms; }
.sfb-diagramm .connection-chip:nth-child(7)  { animation-delay: 150ms; }
.sfb-diagramm .connection-chip:nth-child(8)  { animation-delay: 175ms; }
.sfb-diagramm .connection-chip:nth-child(9)  { animation-delay: 200ms; }
.sfb-diagramm .connection-chip:nth-child(10) { animation-delay: 225ms; }
.sfb-diagramm .connection-chip:nth-child(11) { animation-delay: 250ms; }
.sfb-diagramm .connection-chip:nth-child(12) { animation-delay: 275ms; }
.sfb-diagramm .connection-chip:nth-child(13) { animation-delay: 300ms; }
.sfb-diagramm .connection-chip:nth-child(14) { animation-delay: 325ms; }
.sfb-diagramm .connection-chip:nth-child(15) { animation-delay: 350ms; }
.sfb-diagramm .connection-chip:nth-child(16) { animation-delay: 375ms; }
.sfb-diagramm .connection-chip:nth-child(17) { animation-delay: 400ms; }
.sfb-diagramm .connection-chip:nth-child(18) { animation-delay: 425ms; }
.sfb-diagramm .connection-chip:nth-child(19) { animation-delay: 450ms; }

/* Idle-Breathe auf Verbindungslinien */
.sfb-diagramm #canvas svg path {
    animation: sfb-breathe 6s ease-in-out infinite;
}

/* === Reduzierte Bewegung respektieren === */

@media (prefers-reduced-motion: reduce) {
    .sfb-diagramm *,
    .sfb-diagramm *::before,
    .sfb-diagramm *::after { animation: none !important; transition: none !important; }
}