.musician {
    margin: auto;
    background: var(--neutral-color-light);
    margin: 20px;
}
.musician .subtitle {
    font-size: 16px;
    color: var(--font-color-dark);
    text-transform: none;
    font-weight: normal;
    margin-left: 5px; /* Abstand nach "Musiker" */
}

.musician .container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.musician .card {
    flex-basis: 50%;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-big);
    padding: 5px;
    display: flex;
    gap: 16px;
    box-shadow: var(--shadow-offset) var(--shadow-color);
    flex-wrap: nowrap; /* Immer nebeneinander */
}

.musician .image {
    flex: 0 0 150px; 
}

.musician .image img {
    border-radius: 100%;
    height: 150px;
    width: 150px;
    object-fit: cover;
}

.musician .data {
    flex: 1 1 45%;
    min-width: 0; /* Wichtig, damit es schrumpfen darf */
}

.events-header {
    display: flex;
    flex-direction: column; /* Statt Zeile, Spalte = Linie unter dem Text */
    align-items: flex-start; /* Text links ausrichten */
    margin-bottom: 6px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.events-header .line {
    width: 70%; /* Linie soll die volle Breite unter dem Text einnehmen */
    height: 1px;
    background: var(--border-color);
}
.musician .events ul {
    margin: 0;
    padding-left: 18px;   /* Aufzählungs-Einzug */
}

.musician .events li {
    margin-bottom: 4px;
}

/* kleiner Bullet-Point wie im Screenshot */
.musician .events li::marker {
    font-size: 7px;
}
.events-header strong {
    font-weight: 600;
    margin-bottom: 4px; /* Abstand zwischen Text und Linie */
    white-space: nowrap;
}

.musician .events {
    flex: 1 1 45%;   /* flexibel mit Basis 45% */
    min-width: 0;    /* Schrumpfen erlauben für Umbruch */
    font-size: 14px;
    flex-wrap: wrap;
}

/* Damit Links und Notizen umbrechen und nicht aus der Card rauslaufen */
.musician .events ul a,
.musician .note {
    display: inline;       /* inline oder inline-block */
    white-space: normal;   /* Umbruch erlauben */
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.musician .data .name {
    font-size: 20pt;
    margin-top: 12px;
}

.musician .data .city {
    font-size: 12pt;
    margin-bottom: 8px;
    font-weight: 300;
}

.musician .data .instruments {
    display: flex;
    flex-wrap: wrap;
    gap: 1%;
}

.musician .data .instruments .box {
    font-size: 11pt;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2px 7px;
    margin-bottom: 1%;
    display: flex;
    align-items: center;
}

.musician .data .instruments img {
    width: 25px;
    height: 25px;
    object-fit: contain;
    margin-right: 4px;
}

@media (max-width: 600px) {
  .musician .card {
    flex-wrap: wrap;
    gap: 0.5em;
  }
}