:root {
    --info-label-width: 30%;
    --info-gap: 0px;
    --H1: 24px;
    --fntsmall: medium;
    --info-font-small: 24px; /* Desktop: gleiche Größe für Label + Info */
    --info-font-normal: var(--H1); /* Titel */
}

/* Container für alle Infos */
.info-container {
    display: flex;
    flex-direction: column;
    gap: var(--info-gap);
    word-break: break-word;
}

/* Jede Zeile */
.info-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--info-gap);

    /* Fade-In Effekt */
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
    animation-delay: calc(var(--info-animation-base, 0.2s) * var(--info-animation-order, 1));
}

/* Linke Seite (Label) */
.info-label {
    width: var(--info-label-width);
    font-size: var(--info-font-small);
    color: var(--color7);
}

/* Rechte Seite (Inhalt) */
.info-value {
    flex: 1;
    font-size: var(--info-font-small);
    color: var(--color7);
}

/* Nur der Titel (erste Zeile) größer */
.info-row:first-child .info-value {
    font-size: var(--info-font-normal);
    font-weight: bold;
}
.info-row:last-child  {
  padding-bottom: 15px;
}

/* Links innerhalb der Info */
.info-value a {
    text-decoration: underline;
    color: inherit;
}

.info-value a:hover {
    text-decoration: none;
}

/* Beschreibung (Textblock) */
.description {
    flex-direction: column;
    --info-animation-order: 8; /* Fade-In Reihenfolge */
    margin-bottom: 0px;
}
.info-row.description,
.info-row.description * {
    padding-top:0px; 
    font-style: italic;
    color: grey;
}
/* Englischer Text grau */
.eng {
    color: gray;
	padding-top:15px;
}

/* Standard Textblock */
.info-value p {
    margin: 15px 0; /* Oder dein gewünschter Abstand */
}

.info-value p:first-of-type {
    margin-top: 15px; /* Erster Absatz: kein oberer Abstand */
}

.info-value p:last-of-type {
    margin-bottom: 0; /* Letzter Absatz: kein unterer Abstand */
}
/* Fade-In Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade-In Reihenfolge */
.info-row:nth-child(1) { --info-animation-order: 1; }
.info-row:nth-child(2) { --info-animation-order: 2; }
.info-row:nth-child(3) { --info-animation-order: 3; }
.info-row:nth-child(4) { --info-animation-order: 4; }
.info-row:nth-child(5) { --info-animation-order: 5; }
.info-row:nth-child(6) { --info-animation-order: 6;}
.info-row:nth-child(7) { --info-animation-order: 7; }
.description {
    flex-direction: column;
    --info-animation-order: 8; /* <<< Wichtig: FadeIn-Reihenfolge */
    margin-bottom: 0px;
}
/* Mobilansicht */
@media (max-width: 768px) {
    .info-row {
        flex-direction: column;
         margin-bottom: 15px; 
    }
    .info-label {
        font-weight: bold;
    }
    .info-label,
    .info-value {
        width: 100%;
        font-size: small; /* Mobile: gleiche Schriftgröße für Label und Value */
        margin-bottom: 0px;
    }
	.eng {
 
	padding-top:0px;
}
.info-row.description {
 padding-top:0px; 
}
}