.jg-cim {
    margin-top: 1.5rem;
    border: 1px solid #dfe5ea;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%);
    box-shadow: 0 12px 30px rgba(17, 35, 52, 0.08);
    overflow: hidden;
}
.jg-cim__head { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.35rem; border-bottom: 1px solid #e8edf1; }
.jg-cim__icon { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #063f69, #062f52); box-shadow: 0 8px 18px rgba(6,63,105,.18); }
.jg-cim__icon svg { width: 26px; height: 26px; fill: currentColor; }
.jg-cim__title { margin: 0; color: #182733; font-size: 1.15rem; font-weight: 700; }
.jg-cim__intro { margin: .25rem 0 0; color: #667784; font-size: .94rem; line-height: 1.5; }
.jg-cim__body { padding: 1.25rem 1.35rem 1.35rem; }
.jg-cim__load { min-height: 44px; padding: .75rem 1.15rem; border: 0; border-radius: 10px; color: #fff; background: #063f69; font-weight: 700; cursor: pointer; transition: transform .18s ease, background-color .18s ease; }
.jg-cim__load:hover { background: #062f52; transform: translateY(-1px); }
.jg-cim__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.jg-cim__card { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr) 24px; align-items: center; gap: .75rem; padding: .85rem; border: 1px solid #e0e6eb; border-radius: 12px; color: #263845; background: #fff; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.jg-cim__card:hover { color: #182733; border-color: #063f69; box-shadow: 0 8px 22px rgba(17,35,52,.1); transform: translateY(-1px); }
.jg-cim__file { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; color: #063f69; background: #f2f6f8; font-size: .72rem; font-weight: 800; }
.jg-cim__label { min-width: 0; overflow-wrap: anywhere; font-weight: 650; }
.jg-cim__download { color: #063f69; }
.jg-cim__download svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jg-cim__state { display: flex; align-items: center; gap: .65rem; min-height: 48px; padding: .8rem 1rem; border-radius: 10px; color: #536572; background: #eef3f6; }
.jg-cim__state--error { color: #8b251f; background: #fff0ef; }
.jg-cim__spinner { width: 18px; height: 18px; flex: 0 0 18px; border: 2px solid #d5dce1; border-top-color: #063f69; border-radius: 50%; animation: jg-cim-spin .7s linear infinite; }
@keyframes jg-cim-spin { to { transform: rotate(360deg); } }
@media (max-width: 767.98px) { .jg-cim__grid { grid-template-columns: 1fr; } .jg-cim__head, .jg-cim__body { padding-left: 1rem; padding-right: 1rem; } }
@media (prefers-reduced-motion: reduce) { .jg-cim__spinner { animation: none; } .jg-cim__card, .jg-cim__load { transition: none; } }

/* Layout-Korrektur fuer schmale Medien-Tabs */
.jg-cim__grid {
    grid-template-columns: 1fr;
    gap: 0.7rem;
}

.jg-cim__card {
    grid-template-columns: 46px minmax(0, 1fr) 24px;
    min-height: 68px;
    padding: 0.8rem 0.9rem;
}

.jg-cim__label {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    white-space: normal;
    line-height: 1.35;
}

.jg-cim__file {
    width: 46px;
    height: 46px;
    font-size: 0.7rem;
}

/* Zwei Spalten erst bei wirklich ausreichender Breite */
@media (min-width: 1100px) {
    .jg-cim__grid {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
    }
}

/* Finale Korrektur: Medien-Tab ist auch auf Desktop schmal.
   Deshalb innerhalb des CIM-Bereichs immer genau eine Spalte. */
.jg-cim,
.jg-cim * {
    box-sizing: border-box;
}

.jg-cim {
    width: 100%;
    max-width: 100%;
}

.jg-cim__body,
.jg-cim__grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.jg-cim__grid {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1100px) {
    .jg-cim__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.jg-cim__card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: 46px minmax(0, 1fr) 24px;
}

.jg-cim__label {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
}

/* FINAL: EINHEITLICHES JONGEN-BLAU */
.jg-cim {
    margin-top: 12px;
    border: 1px solid #d7e4e7;
    border-left: 4px solid #063f69;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
}

.jg-cim__head {
    gap: .85rem;
    padding: 1rem;
    background: #f2f6f8;
    border-bottom: 1px solid #d7e4e7;
}

.jg-cim__icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 8px;
    color: #063f69;
    background: #fff;
    box-shadow: none;
}

.jg-cim__title { color: #063f69; }
.jg-cim__body { padding: 1rem; }

.jg-cim__load {
    min-height: 46px;
    border-radius: 8px;
    background: #063f69;
    box-shadow: none;
}
.jg-cim__load:hover,
.jg-cim__load:focus-visible {
    background: #062f52;
    transform: none;
}
.jg-cim__load:active { background: #031d33; }

.jg-cim__grid { gap: 12px; }

.jg-cim__card {
    min-height: 68px;
    border: 1px solid #d7e4e7;
    border-left: 4px solid #063f69;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
}
.jg-cim__card:hover,
.jg-cim__card:focus-visible {
    color: #182733;
    border-color: #c2d4de;
    border-left-color: #063f69;
    box-shadow: none;
    transform: none;
}

.jg-cim__file {
    border-radius: 8px;
    color: #063f69;
    background: #f2f6f8;
}
.jg-cim__download { color: #063f69; }
.jg-cim__state { border-radius: 8px; }
.jg-cim__spinner { border-top-color: #063f69; }