.program-card {
position: relative;
display: flex;
gap: 1.5rem;
border-radius: 4px;
padding: 1rem;
margin-bottom: 1.5rem;
align-items: flex-start;
border: var(--gi-shadow-border);
box-shadow: var(--gi-shadow-box);
background: var(--gi-background-box);
}
.thumbnail {
width: 180px;
height: auto;
border-radius: 4px;
cursor: pointer;
flex-shrink: 0;
}
.thumbnail:hover {
opacity: 0.8;
}
.program-info {
flex-grow: 1;
}
.program-card h2 {
margin: 0 0 0.5rem;
}
.version {
color: #888;
font-size: 0.9em;
}
.updated {
position: absolute;
top: 1rem;
right: 1rem;
font-size: var(--gi-font-size-10);
color: #aaa;
margin: 0;
}
.detail-link {
display: inline-block;
margin-top: 0.7rem;
padding: 0.5rem 1rem;
background-color: #3b4c69;
color: var(--gi-font-color-white, #fff);
text-decoration: none;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
transition-property: background, transform, box-shadow;
transition-duration: 0.3s, 0.2s, 0.2s;
transition-timing-function: ease, ease, ease;
transition-delay: 0s, 0s, 0s;
}
.detail-link:hover {
filter: brightness(1.1);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}
.tags {
margin-top: 10px;
margin-bottom: 0.4rem;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0.5em;
}
.tag {
display: inline-block;
background: var(--gi-tagging-bg);
color: #ccc;
font-size: var(--gi-font-size-10);
padding: 0.3em 0.6em;
border-radius: 4px;
margin-right: 0.5em;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.modal {
display: none;
position: fixed;
z-index: 10;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85);
z-index: 9999;
}
.modal-content {
display: block;
margin: 5% auto;
max-width: 66.666vw; /* zwei Drittel der Viewport-Breite */
max-height: 66.666vh; /* zwei Drittel der Viewport-Höhe */
border-radius: 8px;
box-shadow: 0 0 20px #000;
z-index: 10000;
object-fit: contain;
}
.modal-close {
position: fixed;
top: 20px;
right: 30px;
font-size: 32px;
color: #fff;
cursor: pointer;
}
.intro-text {
margin-top: 10px;
margin-bottom: 2rem;
font-size: var(--base-font-size);
color: #ccc;
}
.languages {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top:10px;
}

.language-badge {
background: var(--gi-tagging-bg);
color: #ddd;
font-size: 0.75rem;
padding: 0.3em 0.6em;
border-radius: 4px;
text-transform: none;
letter-spacing: 0.2px;
line-height: 1.3;
}
.checksum-box {
background-color: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 4px;
padding: 0.75rem 1rem;
margin-top: 1.25rem;
font-size: var(--base-font-size);
color: #bbb;
line-height: 1.5;
word-break: break-all;
}
button.detail-link {
display: inline-block;
outline: none;
padding: 0.5rem 1.2rem;
background-color: #3b4c69;
color: var(--gi-font-color-white, #fff);
text-decoration: none;
border-radius: 4px;
height:40px;
border: 1px solid #3b4c69;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
margin-top: 1rem;
cursor: pointer;
}
a.detail-link {
display: inline-block;
outline: none;
padding: 0.5rem 1.2rem;
background-color: #3b4c69;
color: var(--gi-font-color-white, #fff);
text-decoration: none;
border-radius: 4px;
border: 1px solid #3b4c69;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
margin-top: 1rem;
}
button:hover, a.detail-link:hover {
filter: brightness(1.1);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}
button:focus, a.detail-link:focus {
outline: none;
}
.button-group {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.program-description {
margin-top: 10px;
line-height: 1.6;
}
.download-counter {
margin-top: 1rem;
font-size: 0.85rem;
color: #bbb;
font-weight: bold;
display:none;
}
.languages-box {
background-color: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 4px;
padding: 0.75rem 1rem;
margin-top: 1.25rem;
font-size: 0.75rem;
color: #bbb;
line-height: 1.5;
word-break: break-all;
}

.languages-box strong {
font-size: 0.9rem;
font-weight: bold;
display: flex;
align-items: center;
gap: 0.5rem;
}

.language-badge {
background: var(--gi-tagging-bg);
color: #ddd;
font-size: 0.75rem;
padding: 0.3em 0.6em;
border-radius: 4px;
text-transform: none;
letter-spacing: 0.2px;
line-height: 1.3;
margin-right: 0.5em;
}
.specs-box {
background-color: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 4px;
padding: 0.75rem 1rem;
margin-top: 1.25rem;
font-size: 0.75rem;
color: #bbb;
line-height: 1.5;
word-break: break-all;
}

.specs-box strong {
font-size: 0.9rem;
font-weight: bold;
display: inline-flex;
align-items: center;
}

.specs-list {
display: inline-flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 0.5rem;
}

.spec-item {
display: inline-block;
margin-right: 10px;
white-space: nowrap;
}
.filesize-box {
background-color: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 4px;
padding: 0.75rem 1rem;
margin-top: 1.25rem;
font-size: 0.75rem;
color: #bbb;
line-height: 1.5;
white-space: nowrap; /* Verhindert Zeilenumbruch */
}

.filesize-box strong {
font-size: 0.9rem;
font-weight: bold;
display: inline-flex; /* Verhindert Blockdarstellung */
align-items: center;
gap: 0.5rem;
}

.filesize-list {
display: inline-flex; /* Stellt sicher, dass die Liste in einer Zeile bleibt */
gap: 0.75rem;
margin-top: 0; /* Entfernt den oberen Rand */
}

.filesize-item {
display: inline-block;
white-space: nowrap;
}