/* ── DFB Kiasme — public.css ────────────────────────── */

.dfb-kiasme-wrap {
    max-width: 900px;
    margin: 0 auto;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #2c2418;
    line-height: 1.6;
}

/* ── Header ──────────────────────────── */
.dfb-kiasme-header {
    text-align: center;
    padding: 2rem 1rem 1.5rem;
}
.dfb-kiasme-titel {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 .3rem;
}
.dfb-kiasme-undertitel {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.1rem;
    font-style: italic;
    color: #6b5e4f;
    margin-bottom: .8rem;
}
.dfb-kiasme-beskrivelse {
    font-size: .9rem;
    color: #6b5e4f;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.65;
}

/* ── Diagram ─────────────────────────── */
.dfb-kiasme-diagram {
    padding: 0 1rem 2rem;
}

/* ── Sektion ─────────────────────────── */
.dfb-kiasme-sektion {
    border-left: 3px solid #999;
    padding: .8rem 1rem .8rem 1.2rem;
    margin-bottom: 1rem;
    border-radius: 0 4px 4px 0;
    transition: background .4s ease;
}

.dfb-kiasme-sektion.dfb-kiasme-krise {
    border-left-width: 4px;
    padding: 1.2rem 1rem 1.2rem 1.3rem;
    border-radius: 0 8px 8px 0;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* ── Sektion label ───────────────────── */
.dfb-kiasme-sektion-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: .6rem;
}

.dfb-kiasme-bogstav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 .4rem;
    border-radius: 50%;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.dfb-kiasme-spejl-badge {
    display: inline-block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .15rem .5rem;
    border-radius: 3px;
    cursor: pointer;
    transition: filter .2s;
}
.dfb-kiasme-spejl-badge:hover {
    filter: brightness(.85);
}

.dfb-kiasme-vendepunkt {
    display: inline-block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #8b1a1a;
    background: rgba(139,26,26,.12);
    padding: .15rem .5rem;
    border-radius: 3px;
}

/* ── Kort-grid ───────────────────────── */
.dfb-kiasme-kort-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .6rem;
}

.dfb-kiasme-kort {
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 6px;
    padding: .75rem .9rem;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: box-shadow .2s, transform .15s;
}
a.dfb-kiasme-kort:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    transform: translateY(-1px);
}

.dfb-kiasme-kort-ref {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .2rem;
}
.dfb-kiasme-kort-titel {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: .2rem;
}
.dfb-kiasme-kort-beskrivelse {
    font-size: .8rem;
    color: #6b5e4f;
    line-height: 1.5;
}

/* ── Footer ──────────────────────────── */
.dfb-kiasme-footer {
    text-align: center;
    padding: 1.5rem 1rem 2rem;
    font-size: .8rem;
    color: #6b5e4f;
}
.dfb-kiasme-footer a {
    color: #2e4a6e;
    text-decoration: none;
}
.dfb-kiasme-footer a:hover {
    text-decoration: underline;
}

/* ── Highlight flash ─────────────────── */
.dfb-kiasme-sektion.dfb-kiasme-highlight {
    animation: dfb-kiasme-flash .8s ease-out;
}
@keyframes dfb-kiasme-flash {
    0%   { background: rgba(46,74,110,.15) }
    100% { background: transparent }
}
.dfb-kiasme-sektion.dfb-kiasme-krise.dfb-kiasme-highlight {
    animation: dfb-kiasme-flash-krise .8s ease-out;
}
@keyframes dfb-kiasme-flash-krise {
    0%   { background: rgba(139,26,26,.25) }
    100% { background: inherit }
}

/* ── Responsive ──────────────────────── */
@media (max-width: 600px) {
    .dfb-kiasme-kort-grid {
        grid-template-columns: 1fr;
    }
    .dfb-kiasme-sektion {
        /* Halvér indrykningen på mobil */
        margin-left: calc(var(--dfb-kiasme-niveau, 0) * 1rem) !important;
    }
    .dfb-kiasme-diagram {
        padding: 0 .5rem 1.5rem;
    }
}